[Support request] Page Hero background image behind section

Home Forums Support Page Hero background image behind section

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1029697
    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!

    #1029706
    Leo
    Staff
    Customer Support

    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);
        }
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.