[Resolved] I have a problem with page header parallax effect.

[kvejonsio]

Hi Tom

I have a problem with page header parallax effect.
in video overview page goes above the image, but on the site which I’m building it acts differently. The site is on localhost yet but you can look on it here
any help would be appreciated.
Thank you in advance

[Tom]

Hi there,

That looks normal to me? What about it is acting differently?

[kvejonsio]

when I scroll the page up another image comes out and the page doesn’t cover the image as it does on Video Overview (01.18min)

[Tom]

Ah yes, that was causing mobile issues with some background images.

Try this:

.generate-content-header {
    background-attachment: fixed;
}

[kvejonsio]

Yes it’s solved.
Tanks a lot

[Tom]

You’re welcome 🙂

[Neil]

Hi Tom,

This just solved the problem for me too, I couldn’t work out why it behaved differently in your video. Is there a reason that this isn’t in by default then? Anything I need to know that might not work as expected?

Thanks,

Neil.

[Tom]

It likely used to be a part of core but was removed.

The next version of Page Header has a much improved version of parallax.

[Neil]

I’m interested to see what that update brings then as right now it’s pretty damn perfect 🙂

[Tom]

I think you’ll like it! 🙂

[Vajra]

Hi Tom,
I’m building a new site one of many using Generatepress. This is the first time I have used the element “Blog Page Header” with parallax and tried to make the image fixed. I have tried every bit of CSS I can think of but the image still moves like normal parallax? It is the blog page and I’m using “Simple CSS” on that page only. Also tried CSS in the “Blog Page Header” element.
Can you please advise?
Thanks
Vajra

[Leo]

Hi there,

This is a very old topic – page header is now a deprecated module.

Can you open a new one?

Thanks 🙂

[Author]

Posts