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

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?

header.css:

Code: 
#header
{
background: url(http://cafesaxophone.com/x-pic/header-background.png) no-repeat center top;
}
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Brogan said:
What is it you're trying to achieve?
Click to expand...

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.

DeviateDefiant said:
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.
Click to expand...

I'll look into that, thanks.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
DeviateDefiant said:
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.
Click to expand...


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
 
Upvote 0 Downvote
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
 

Attachments

  • header-background-1000-bg.webp
    header-background-1000-bg.webp
    12 KB · Views: 1
  • header-background-1000.webp
    header-background-1000.webp
    65.9 KB · Views: 1
  • header-background-1000-bg.webp
    header-background-1000-bg.webp
    11.6 KB · Views: 1
  • header-background-1000-bg-crop.webp
    header-background-1000-bg-crop.webp
    12 KB · Views: 1
Upvote 0 Downvote
DeviateDefiant said:
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:
Click to expand...

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)
 
Upvote 0 Downvote
@Brogan gave you the right answer already mate, you need to change the height of the header, it's currrently 118px too small.

Appearance > Style Properties > Header and Navigation > Settings
Click to expand...

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.
 
Upvote 0 Downvote
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:
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom