[Support request] One Background Picture on Sections Page

[stesch79]

Hi team

I have already search through this forum but wasn’t able to find something similar I want to achieve: https://www.momtricks.com/start-here/ The background picture (with the 3 ladies) on a sections page. The picture shall be visible on every second section or even better, selectable where to show and where not.

Would that be possible?

Cheers,
Stephan

[Leo]

Hi there,

You can just add background image to the specific section?
https://docs.generatepress.com/article/sections-overview/#background-image

Let me know if this helps.

[stesch79]

Hi Leo

Thanks. Set the background for one section is quite clear. But I would like to have the background picture on the whole site for and only showing on defined sections. As you can see on the example site, the background picuture is set for the first section and also shown on one of the last sections.

Regards,
stephan

[Leo]

Hmm I’m not still sure what you mean? The example site actually added that same image twice, one for each of those sections.

[stesch79]

Hm… I feel like an idiot. You’re absolutly right! To be honest, I did not really tested it because I thought this cannot look the same as on the example page… but it does when I set the background image on each section I would like to show the image: https://www.sciurus.ch/test/

At least it does for the first two sections with the background. On the third section with background, the image looks repeated…

[Leo]

Ahh that’s because there no content after it so the parallax effect won’t work.

Should be able to make it better by using this CSS:

#generate-section-5.generate-sections-container {
    background-position: center;
}

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

Let me know.

[stesch79]

Thanks. I did active the parallax effect and set your custom CSS. But now I think it’s even worse 🙁
https://www.sciurus.ch/test/

[Leo]

Hmm try going back to your settings from before and just use the CSS.

Let me know.

[Christoph]

And what is the solution for “One Background Picture on Sections Page” or is this impossible?

[Leo]

I guess you can can add a background image to the content of that page:

.site-main {
     background-image: url(http://URLHERE.com);
}

Then just make sure the sections background colors have opacity.

[stesch79]

It’s basically still not the same as shown in my first post. The “.site-main” does just set background picture, but it’s moving while scrolling. On the example of my first post, the background picture does not move when scrolling.

[Leo]

The first example you linked is not using “one background image”.

They simply add a background image (https://cdn.momtricks.com/wp-content/uploads/2014/12/best-baby-registry-guide.jpg) twice, once to each section and set it to fixed.

You can achieve the same using Sections add-on.

[Author]

Posts