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

[Mr Lucky]

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:

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

 

[Paul B]

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

 

[Mr Lucky]

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.

 

[Paul B]

What is it you're trying to achieve?

 

[DeviateDefiant]

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.

 

[Mr Lucky]

What is it you're trying to achieve?

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.

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.

I'll look into that, thanks.

 

[DeviateDefiant]

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.

Providing screenshots will help explain the issue better

 

[Paul B]

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.

 

[Mr Lucky]

Providing screenshots will help explain the issue better

here is a screenshot of the site


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

 

[Paul B]

If it's the height which isn't correct, you need to set that correctly in the SPs - Height of header logo.

 

[Mr Lucky]

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.

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

 

[DeviateDefiant]

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.

 

[Mr Lucky]

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.

Thanks, here it is.

 

[DeviateDefiant]

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

 

[Mr Lucky]

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:

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)

 

[DeviateDefiant]

@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

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.

 

[Mr Lucky]

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

 

[DeviateDefiant]

"Ctrl" & "+" - you're zoomed out.

 

[Mr Lucky]

"Ctrl" & "+" - you're zoomed out.

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.

 

[DeviateDefiant]

Not a problem