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

XF 1.3 Page background image shows smaller than it actually is.

Discussion in 'Styling and Customization Questions' started by Mr Lucky, Apr 14, 2014.

  1. Mr Lucky

    Mr Lucky Well-Known Member

    I have a page background for my header, which shows as smaller than its actual dimensions.

    Can anyone please explain why this might happen?


    background: url(http://cafesaxophone.com/x-pic/header-background.png) no-repeat center top;
  2. Brogan

    Brogan XenForo Moderator Staff Member

    What doesn't seem to be working for you?
    It looks fine to me:

  3. Mr Lucky

    Mr Lucky Well-Known Member

    Yes, it works, but I had to use trial and error. (the coffeecup on the left is a logo, not part of the background

    If I do a screenshot of the site, the image is actually smaller.
  4. Brogan

    Brogan XenForo Moderator Staff Member

    What is it you're trying to achieve?
  5. While I can't replicate an issue either, the background image is 2560px wide, I'm assuming that's because you're trying to ensure that the background always covers the entire width even on large monitors. I'd suggest using a transparent image at the same size as .pageWidth instead and using CSS to generate the background colour underneath it by setting a background value for #headerMover > header, it's just an unnecessary bandwidth cost to yourself and the users.
  6. Mr Lucky

    Mr Lucky Well-Known Member

    I will be doing some changes to the header, and it is easier if I can do it at the correct display size. As mentioned, the packground is dispallying at a smaller size than the actual image I'm working with in photoshop.

    I'll look into that, thanks.
  7. Providing screenshots will help explain the issue better :)
  8. Brogan

    Brogan XenForo Moderator Staff Member

    A background image can only display up to the width available in the browser.
    If it's the height which isn't correct, you need to set that correctly in the SPs - Height of header logo.
  9. Mr Lucky

    Mr Lucky Well-Known Member

    here is a screenshot of the site

    Here is the same dimension screenshot of the actual image viewed in photoshop (at 100%)
  10. Brogan

    Brogan XenForo Moderator Staff Member

  11. Mr Lucky

    Mr Lucky Well-Known Member

    OK I tried that and using a transparent image same as page width doesn't work unless it's a 24 bit png which is enormous compared to the full page image

    Full page png = 74kb
    page width 24 bit png = 519kb

    I can have page width non transparent with bg same as background color in header, but aves only about 5kb
  12. It shouldn't save at half a MB using alpha transparency, there's absolutely no reason. Attach the 519kb copy here and let me take a look.
  13. Mr Lucky

    Mr Lucky Well-Known Member

    Thanks, here it is.

    Attached Files:

  14. The file size is due to using opacity across the entire image, therefore the alpha values have to be saved for each. I've optimised it and it's 5x lower, but still bigger than needed. With a BG from the copy attached the smallest size I could get was 85k.

    Trans: 98kb
    BG: 85kb

    But rethinking this I'd recommend a JPG with the background colour applied to #headerMover > header as I mentioned above. On top of that I'd crop it to the size of the image and not the header and align the background to the right:

    JPG: 38kb
    Crop: 36kb

    Attached Files:

  15. Mr Lucky

    Mr Lucky Well-Known Member

    Thanks, yes I agree with that I'll try it, but forst I need to answer my initial problem of why the image is showing as smaller than it really is (when in a browser that's big enough to not be causing any shrinkage to to being responsive)
  16. @Brogan gave you the right answer already mate, you need to change the height of the header, it's currrently 118px too small.

    Change "Height of Header Logo" to 338px, that should cause the header size to be calculated at 400px in total which matches the height of the background image.
  17. Mr Lucky

    Mr Lucky Well-Known Member

    Thanks, I tried that but the background still shows smaller than the actual image. And now the header is too high. The actual height of the header was OK before.

    It's not the height that is the issue, it's the actual size of the image. If you look at the screenshots I posted, the coffeecup on the right is smaller in the screenshot of the site compared with the actual file.

    EDIT: I did not want the header to match the height of the the image, if I make the height of header logo bigger, then the header becomes higher than I want. The bottom bit of the saucer should not be showing
    Last edited: Apr 15, 2014
  18. "Ctrl" & "+" - you're zoomed out.
    Mr Lucky likes this.
  19. Mr Lucky

    Mr Lucky Well-Known Member

    Thanks, it seemed the browser window was showing smaller, I had no idea that could happen.

    So now I can go ahead and follow your suggestion of using a narower jpg with background the same colour as the header background colour.

    many thanks.
  20. Not a problem :)

Share This Page