Header background image width

Brett Peters

Well-known member
I have selected an image that I would like to use for my header and set it in Style Properties: Header Navigation, What I am trying to figure out now is how do i set the width to 100% or Auto ?

I have spent a fair while searching for the answer but unfortunately I am still stuck with this one
 
Interesting. I had never heard of background-size before your post. That looks like it should work. Or you can slice up the image and have a fixed portion and a repeating portion. Otherwise images are a fixed width and don't normally fill to percentages.
 
but what is the width of the image you need to upload to have it show on full screen?

so the image gets re-sized automatically when you make the browser-window smaller ?
 
Select repeat-x from the dropdown menu "Repeat" and then insert "top" afterwards if it's a repeating background image.

Edit: Ignore this post I'm probably reading into your issue wrong.
 
but what is the width of the image you need to upload to have it show on full screen?

so the image gets re-sized automatically when you make the browser-window smaller ?

Normally you would use an image that is large enough to cover any width. You can set the background to repeat if you want. Smaller browser windows will simply not show the full background image.
 
Thanks guys for the suggestions


@ Jake Dam your image must be large
@Shelly It was an image that does not suit repeat or the option to fade it in from the right with a solid colour


I have opted to keep my image as is (small) with a transparent background, Then added the following to header.css

after
Code:
@property "/header";

I added

Code:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

I am not the best with code but it seems to do the job for the current browsers that I could test with on a wide monitor
 
After opening Parallels and starting up IE i had to add a couple of lines so IE would play nice

Code:
-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.jpg', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/header.jpg', sizingMethod='scale')";

overflow: auto;
 
Top Bottom