[Resolved] parallax images resize differently in fiefox?

[Vajra]

Hi Tom,
In the ideal world the parallax effect on this Adwords landing page
http://earthsharing.org/usa-natural-resources/
would look the same in all browsers but it does not?
It looks how I want it in Firefox
But in Chrome or Safari, the image is magnified and you only get the top part?

By the way, I added this CSS
.page-header-content {
background-attachment: fixed;
background-position-y: 0px !important;
}
to keep the image stationay.

[Leo]

Hi there,

I’m seeing the same thing across all browsers. This is from FireFox:

I think the issue here is that you are using full width container but the background images isn’t big enough so it’s zoomed in:
http://earthsharing.org/files1/wp-content/uploads/2018/05/wind-turbines-2-web.jpg

Let me know if this helps.

[Vajra]

Thank you

[Vajra]

Hi Its still zooming in now the image is 3000×833/
http://earthsharing.org/files1/wp-content/uploads/2018/05/wind-turbine-big-crop-3000×833-web.jpg

[Vajra]

How do you stop it zooming in?

[Vajra]

This has the same header and shows correctly?
http://earthsharing.org/natural-resources/
I cleared the cache local as well as Cloudflare?

[Leo]

The page that’s not working is still loading the original small image.

[Vajra]

So I cleared all the caches in different browsers many times loaded it with a different header. Then made a new header with the bigger image but it still seems to revert to the old image???

[Vajra]

I made a new page
http://earthsharing.org/usa-natural-resources/

changed the old one with exactly the same settings to old
http://earthsharing.org/usa-natural-resources-old/

There is something in that page that will not change?

[Leo]

Clearing browser cache won’t work. Any plugin or server cache?

This site is now working and showing the new image: http://earthsharing.org/usa-natural-resources-old/

Try removing the CSS you’ve added:

.page-header-content {
    background-attachment: fixed;
    background-position-y: 0px!important;
}

[Vajra]

Ah its my css that is the problem.

What CSS can you suggest to make the parallax image stationary?

[Leo]

So you don’t want parallax? If so can you disable parallax first?

[Author]

Posts