[Resolved] sticky Background

[Steve]

Hello GeneratePress team,

this forum helped me alot and iam very happy with the Premium content, really well done.
Iam using the free version of Elementor (but iam open to use the sections addon of GP).
Iam stuck at the moment because i cant get a sticky background to work, here is an example of the effect iam trying to achieve:
http://codepen.io/tutsplus/pen/xGggLa
(code taken from: https://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css–cms-24042)

There should be a different background(full width) for every section.
ive tried to use https://github.com/wilddeer/stickyfill as well but i cant get it to work.
I asked the same question in the wordpress/elementor forum but got no answer so far (https://wordpress.org/support/topic/sticky-background-2/).
Every help you can give me is much apprechiated.

[Leo]

Hi Steve,

Really glad you find the forum helpful and enjoying GP.

Not quite sure what you meant by sticky background? The link you provided (http://codepen.io/tutsplus/pen/xGggLa) looks like a sticky sidebar to me.

If that’s what you wanted, there are a few plugin options out there that might help:
https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
https://wordpress.org/plugins/mystickysidebar/

Let me know if this helps 🙂

[Steve]

Hi Leo thanks for the quick answer,

I’ve already read the links you gave me, but that was not what I meant.
The link I gave you was just to get and idea of the effect.
The sidebar gets sticky as soon as it would leave the screen, I want that for my background.

If you have a 3 page article-no.1 and after that another 3 page article-no.2, the first background is to start at the beginning of the first article and as you scroll down and the top of the background would leave the screen -> it gets sticky and follows till you hit the end of the article.

As you scroll down you see the first Background leaving to the top (like the sidebar you´ve seen)
and you see the second article with the new background bellow,

and so on 🙂

Maybe its not even possible or realy realy hard, but that was my idea.

[Leo]

Have you tried fixing the background image in Background image settings?
https://docs.generatepress.com/article/backgrounds-overview/#attachment

Let me know.

[Steve]

I have tried the options now (was to fixated on elementor before).

Ive set the content-image and used the first Attachment option (Attachment – The background scrolls along with the element) i’ve deactivated the sections option as well and got this: http://www.naturheilpraxis.gotzel.com/experiment-2/
For me the BG is not following.

For the second try i’ve activated the sections option and added 3 sections with different pictures (not sure where i can find the scroll options here) and activated parrallax for the middle one (not the effect i want)
http://www.naturheilpraxis.gotzel.com/experiment-1/
Not working so far as well.

[Leo]

I think what you wanted would be the option Fixed. Or have you already tried that?

[Steve]

Well the fixed option is working well, but its not what i want.
http://www.naturheilpraxis.gotzel.com/experiment-2/
As you can see the beach on the top is not visible as you enter the site, and if you would use fixed for the next background as well, as you scroll down and see the new section header you would see the bottom part of the new picture, and not the top part (which i want to show first)^^

sorry if iam bad at explaining
and thank you for your patience^^

[Leo]

Did you add the background image to the Body? If so can you try to add it to Content?

Let me know 🙂

[Steve]

It was added to the Content, there was no image added to the body.

[Leo]

I can see the beach on top now without scrolling down now?
https://s2.postimg.org/d35qw4395/ina.jpg

[Steve]

I changed it back to “Attachment: Attachment” and “scale: Cover” to test a bit more.
(sorry for the confusion – will use another page for my new experiments now)
And yes i see the same ^^

[Leo]

Sorry do you need help on this? which page am I looking at now?

[Steve]

Good morning,

I meant that i would use another page to play around with the options to not confuse you with an ever changing page. I will just continue to try to find the CSS for my case (trying out the waypoints.js at the moment).

If you have a lead as to how the effect can be achieved, I would be happy if you let me know.
As soon as i get it working Ill let you know.

Thank you for all your time.

[Leo]

Sorry again but am I looking at
http://www.naturheilpraxis.gotzel.com/experiment-1/ or http://www.naturheilpraxis.gotzel.com/experiment-2/

Experiment 2 doesn’t have a background image anymore.

[Steve]

Experiment-1 is the one with the sections – so this one.
this css is added atm:

#generate-section-1, #generate-section-2 {
background-repeat: no-repeat;
background-size: contain;
background-attachment: local;
position: sticky;
top: 0px;
}
Good thing about this is that the background is following until the end of the article. yay 😛
Bad thing – the text follows too ^^
Cant get the text to scroll normally so far.

[Author]

Posts