In the following link, I have it exactly how I need it in Firefox, but in Chrome I don’t get to see the same amount of the header pic as I do in Firefox.
I think the container is the isssue within the header, but cant work out why its height is greater in Firefox and not in Chrome.
What I can see is in Chrome the pic bottom ends up around the middle of the girl, the top of her chest. In mozilla, you can see both peoples arms the screen they looking at.
Its the amount of the pic that’s view-able.
I have used media css for different screen sizes, so maybe we looking at different views, I’ve got a wide monitor.
The only way you can show more of the image is by increasing the height of the container as the screen gets bigger. It’s a mater of basic mathematics in that to maintain the aspect ratio the image height and width must increase proportionately.
At the moment the height of the header stops at 520px so as the page gets wider the image gets bigger and bigger
in both directions resulting in only the heads showing in the space available.
You either need to create a header that scales at the aspect ratio or find a better ‘letter-box’ style image to show at wider screens.
You haven’t shown the screenshots of where you say it looks ok in Firefox? I;m just guessing you have the browsers open at different widths