The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Need my header image to fit all screen sizes

View previous topic View next topic Go down

In progress Need my header image to fit all screen sizes

Post by SensGrl4Life on May 20th 2015, 8:23 pm

I use Chrome and my header fits perfectly with my screen size. In looking at other computers, tablets etc.. the header does not fit.
This is the logo http://i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original

This is what my screen looks like using Chrome.
http://i636.photobucket.com/albums/uu82/JustJoJo/Image2_zpsy5kdcznq.png~original

This is what it looks like using Chrome & Firefox on both a desktop and an Android Tablet.
http://i636.photobucket.com/albums/uu82/JustJoJo/unnamed_zpsmaqu9xk4.jpg~original

I just want to know how to get it to fit for everyone.

The CSS I'm using is:

.headerbar {
min-height:320px;
background-color: transparent;
background-image: url('http://i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original');
background-position: center;
background-repeat: no-repeat;
background-size:cover;

border: 3px solid #AB0000;
}


Thanks for your help!!

SensGrl4Life
New Member

Posts : 5
Reputation : 1
Language : English

http://thereds.aforumfree.com/forum

Back to top Go down

In progress Re: Need my header image to fit all screen sizes

Post by Ange Tuteur on May 20th 2015, 8:51 pm

Hi @SensGrl4Life,

I see you're using background-size, so it depends on if the browser supports this CSS property. For better support, you can try using the vendor prefixes for this property.

CSS :
Code:
.headerbar {
  min-height:320px;
  background-color: transparent;
  background-image: url('http://i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original');
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  border: 3px solid #AB0000;
}

If that doesn't work, I'd recommend placing the image as a logo via pics management, and then adjusting it's width with CSS. Example :
Code:
.headerbar img { width:100% }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Need my header image to fit all screen sizes

Post by SensGrl4Life on May 20th 2015, 8:59 pm

First option adjusts it a little...but its still not 100%

SensGrl4Life
New Member

Posts : 5
Reputation : 1
Language : English

http://thereds.aforumfree.com/forum

Back to top Go down

In progress Re: Need my header image to fit all screen sizes

Post by Ange Tuteur on May 20th 2015, 9:03 pm

You can adjust it a bit by changing cover to 100% or 100% 100%. The latter fits the image to the dimensions of the HTML element, so there's the possibility of the image appearing... distorted, on some displays.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Need my header image to fit all screen sizes

Post by SensGrl4Life on May 20th 2015, 9:26 pm

Will try that when I get home...thanks

SensGrl4Life
New Member

Posts : 5
Reputation : 1
Language : English

http://thereds.aforumfree.com/forum

Back to top Go down

In progress Re: Need my header image to fit all screen sizes

Post by SensGrl4Life on May 21st 2015, 6:02 am

The width seems to be ok now.. but the height is off ...

SensGrl4Life
New Member

Posts : 5
Reputation : 1
Language : English

http://thereds.aforumfree.com/forum

Back to top Go down

In progress Re: Need my header image to fit all screen sizes

Post by Ange Tuteur on May 21st 2015, 6:54 pm

Personally, I would recommend that the image is placed in Display > Pics management > Advanced > Logo

This way you'll have an easier time adjusting the image, so that the height can be automatically calculated. Background images are good, but they take up no space, so it makes it impossible to calculate the dimensions on other screens, unless you utilize numerous media queries.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum