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

[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

[David]

Hi there,

do you have the Parallax option enabled in the Header Element ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vajra]

Yes I have the Parallax option enabled

[Tom]

Hi there,

Can you link us to your site?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Vajra]

http://vajra-web.com/files5/blog/

http://vajra-web.com/files5/wp-login.php

[David]

If you want to Fix the background you will have to disable the Parallax and add this CSS:

.page-hero {
   background-attachment: fixed;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Vajra]

Hi David I tried that it id not work!

I want the background fixed like the background on the home page.

“Optimizing every area of your business!
From market research, design and prototyping to production and delivery, we cover it all.”

[Elvin]

Hi,

Hi David I tried that it id not work!

Strange. Was it saved properly? Have you tried clearing cache after saving?

I want the background fixed like the background on the home page.

Have you tried copying the settings from your Home Page header to your blog page header? That may be the best thing to do if you prefer how the BG works on the home page.

A wise man once said:
"Have you cleared your cache?"

[Peter]

Hi Elvin,
I am using the front my first question:
“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?”

http://vajra-web.com/files5/blog/

I did this as David suggested

“If you want to Fix the background you will have to disable the Parallax and add this CSS:

.page-hero {
background-attachment: fixed;
}”

Just tried it in another browser it just scrolls like a regular header?

[Peter]

I want the background fixed like the background on the home page.

“Optimizing every area of your business!
From market research, design and prototyping to production and delivery, we cover it all.”

[Elvin]

Can you try adding this CSS?

.blog .page-hero {
background-attachment: fixed;
}

Make sure you save it and clear autoptimize’s or any caching plugin you use.

I want the background fixed like the background on the home page.

I’ve checked the homepage of your site and it isn’t exactly “fixed”.

The homepage of your site also uses a Header element with parallax applied to its background image. If you want the exact same thing for your blog page you can just replicate its settings on your Blog Page Header Element. https://docs.generatepress.com/article/header-element-overview/#parallax

A wise man once said:
"Have you cleared your cache?"

[Peter]

Does not work!
It’s also one of the many CSS I tried out myself.

[Peter]

I want the background fixed like the background on the home page.NOT the header but lower down the page where it has this text over the fixed image.

“Optimizing every area of your business!
From market research, design and prototyping to production and delivery, we cover it all.”

[Peter]

I want the background fixed like the background on the home page.NOT the header but lower down the page where it has this text over the fixed image.

“Optimizing every area of your business!”

[Tom]

That area is using background-attachment: fixed.

I’m not seeing the above CSS on your site at all – is it still added? If so, where did you add it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts