• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Header background image width

Brett Peters

Well-known member
#1
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
 

Brett Peters

Well-known member
#2
I have added background-size:cover; to the css and that seems to do the trick, Would this be correct or is their a better way of doing things
 

Jake Bunce

XenForo moderator
Staff member
#3
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.
 

erich37

Well-known member
#6
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 ?
 

Shelley

Well-known member
#7
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.
 

Jake Bunce

XenForo moderator
Staff member
#8
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.
 

Brett Peters

Well-known member
#9
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
 

Brett Peters

Well-known member
#10
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;