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

Header background image width

Discussion in 'Troubleshooting and Problems' started by Brett Peters, Feb 8, 2011.

  1. Brett Peters

    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
     
  2. Brett Peters

    Brett Peters Well-Known Member

    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
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  4. erich37

    erich37 Well-Known Member

  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Header

    Enter the URL of the background image as shown below:

    Screen shot 2011-02-08 at 12.17.52 PM.png

    That creates this effect:

    Screen shot 2011-02-08 at 12.20.34 PM.png
     
  6. erich37

    erich37 Well-Known Member

    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 ?
     
  7. Shelley

    Shelley Well-Known Member

    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.
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  9. Brett Peters

    Brett Peters Well-Known Member

    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
     
  10. Brett Peters

    Brett Peters Well-Known Member

    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;
     

Share This Page