Hi. My site is https://www.weareinterconnected.com and I use siteorigin builder and I am trying to recreate a site where I have several height sections on my home page. First section is the full browser height based on the users resolution of their device and it conforms to any browser height and when someone scrolls down the next content website section appears with text and image, but I don’t want that 2nd bottom content section to be shown when someone goes to the site. It would also be nice if I could have it so that there is a down arrow and when people click on it, it goes directly to the next section below. What I am trying to explain/simulate is similar to this sites home page. https://www.borngroup.com/
I have one background image as you can see, so I would like to have it that all the content sections utilize this one background image, and not separate ones for each section.
What is the CSS code that I can add to global CSS so I can have several perfect sections on the home page? Again I would like to be able to have every device to be responsive to this. Any help and tips would be appreciated. Thank you.
it is similar to what this guy is trying to create https://stackoverflow.com/questions/21357819/div-section-100-height-of-onepage-website
Hi Michael,
For backgrounds specific to each section, you can replicate the full width/height slider by adding a full width stretched row with a SiteOrigin Hero / Layout Slider widget with the height set to 100vmin.
For just the one background over all sections, you should add a layout builder to your page and add your background to that widget and then add all of the widgets to that widget. This will allow you to have a single background over all sections.
thanks Alex.