Background images for smaller screens


#1

Hi,

I’m using Page Builder by SiteOrigin. I’ve decided to use background images for some of the rows. The behave pretty nice on the desktop. However, on mobile devices, the do not scale very nice.

What I would like to be able to do, is similar to the header image. There I’ve setup a 1920 img for desktop and a 1024 for smaller screens.

Is there a way for me to have more controle over the way images are set for mobile devises?

The site I’m working on: https://designingcultures.eu/

Best, Marcel


#2

Hello,

Background on rows is set as background image, and there is no option to set alternative image for smaller screens, so you can only use available properties to adjust it a bit. You can use css below in order to stick to image size and not to cover row:

@media screen and (max-width: 1024px) {
    .panel-layout .panel-row-style {
        background-attachment: scroll !important;
        background-position: center center !important;
        -webkit-background-size: contain !important;
        -moz-background-size: contain !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }
}

Result with that code should look like this https://www.screencast.com/t/AKatRMICJvPr . As you can see, there will be some white space above and below the image.

From my opinion second option is better, and it is to set image to cover container with the css code below:

@media screen and (max-width: 1024px) {
    .panel-layout .panel-row-style {
        background-attachment: scroll !important;
        background-position: center center !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}

and result should look like this https://www.screencast.com/t/3fUcbiDJS2 . It is slightly better compared to current state https://www.screencast.com/t/rHkqgkoi .

You can apple the code from Appereance > Customize > Additional CSS field.

If you want to try something else, check available properties here https://developer.mozilla.org/en-US/docs/Web/CSS/background .

Best Regards!


#3

Thank you so much!

Good to know what the possibilities are. I guess I will have to choose for photo’s that work, content wise…

Marcel