Home>Support>Responsive image on pagebuilder row background

Responsive image on pagebuilder row background

I’ve searched and can’t find the answer. Is there a way to make the background image of a row responsive? Maybe the image is already set to be responsive and the padding is off. It looks normal on a desktop but from a cell phone the row background image doesn’t work well with the circle icons. Please advise. Thanks.

URL: http://wish2enrich.org

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 8 months ago Andrew Misplon Hi, I Work Here

    Hi Paul

    The row style currently has the following attributes relating to background image:

    .panel-row-style {
    background-position: center center;
    background-repeat: no-repeat;
    }
    

    We could perhaps augment that and place the following under Appearance > Custom CSS:

    .panel-row-style {
    background-attachment: fixed;
    background-size: cover;
    }
    

    That’s all I can really think of right now to improve that behaviour.

  2. 7 years, 8 months ago pcofer

    After applying this change it looks great on the mobile device but from the desktop browser, it zooms in on the image. Any thoughts?

  3. 7 years, 8 months ago pcofer

    I think the problem has to do with my resolution on the picture. After playing with the image and CSS I was able to get it looking better. Thanks for your help! Here’s what I added…

    .panel-row-style {
    background-attachment: fixed;
    background-size: 115%;
    }

  4. 7 years, 8 months ago Andrew Misplon Hi, I Work Here

    It’s most likely the background-size:cover that was causing that on Desktop – that’s if the image wasn’t as big as the display.

    Glad to hear you found a fix.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More