[Support request] Page Hero background image behind section

[Patricia]

I’ve designed myself into a situation I can find a solution for! The home page is built in sections. Section 1 uses full width background image only and a div to set the section height, section 2 uses your div grid layout with a negative margin top to put the three columns on top of the Section 1 background image. I made the client very happy with this layout… now she wants the section background image on this page (and all the other pages) to be mobile-friendly. If I create an Page Hero Element, with a featured image, the image looks great in mobile but the tops of the Section 2 columns sit behind the image on desktop view. Do you have any suggestions how to keep the columns on top of the background image for desktop? For mobile, because I used your grid code, the columns look great. Thank you so much!

[Leo]

Hi there,

Unfortunately background images aren’t responsive by nature.

One thing you can consider is to use CSS and switch out the image for mobile only. For example:

@media (max-width: 768px) {
    #generate-section-1.generate-sections-container {
        background-image: url(https://MOBILE-IMAGE-URL-HERE);
    }
}

[Author]

Posts