[Heinz]

Hi
For example, if you store a background image in the Hero area, this image always remains as the background and the foreground (text) moves over the image when scrolling. However, now I would like the image to scroll with the text in the Hero area. How can I do that?
Many thanks for the help.

[Skandha]

@henebe: Hello there,

To have the background of the Hero Content scroll

Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#hero-section {
background-attachment: scroll !important;
background-size: contain !important;
background-repeat: repeat !important;
}

Let me know if this what you want!
Kind Regards,
Skandha

[Heinz]

Many Thanks. It works, but not quite how I imagine it. I have the line “background-repeat: repeat !important;” omitted as I don’t want the background to be augmented. However, depending on the window size, there are edges above and below or on the sides. However, I would like the background to adapt to the window size, just like it works with other content. Is that possible? Many thanks for the help.

[Skandha]

@henebe: Hello there,

Since you have a large  Hero Content with a large height you will need to have the background on repeat or upload an image with a much much larger height than the current one.

I hope this helps you out!
Kind Regards,
Skandha

[Heinz]

Many Thanks. got it there

[Author]

Posts