This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to serve scaled background images with the SiteOrigin Page Builder rows

Open 2 replies pluginplugin-page-builder
acadien
Started · Latest reply by acadien

Hey there and thanks for useful products :-)
I have a webpage using an image as background and I would like mobile/tablet users to be served a smaller resolution image to save them bandwidth and improve speed.
I first tried with a 1366px wide image. I did an “inspect element” on the background and based on that tried the following CSS in my child theme’s stylesheet:

@media all and (max-width:1366px) {
.siteorigin-panels-stretch .panel-row-style {
background-image: url("http://here_i_placed_a_link_to/a/lower_resolution_background_image.jpg")
}
}

Testing shows it’s not working though… any thoughts?

URL: http://en.kennelskovard.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. acadien

    Ok, I just noticed the missing “;”. How embarrassing.

    But that being said it still doesn’t appear to work. It loads the larger image regardless og viewport width.

  2. acadien

    Ok, I think I figured it out. It was because I was trying to change inline styling.

    #pg-6-0 div.panel-row-style[style] {
background-image: url("http://here_i_placed_a_link_to/a/lower_resolution_background_image.jpg") !important;
}

    The, “div”, “[style]” and “!important” have to be there to override the original styling which is inline.

    The “#pg-6-0” is there to specify which page I’m talking about (otherwise the background gets set to the specified URL on all pages).

    I haven’t implemented it yet because of spacing issues that I don’t feel like dealing with right now, but the worst is over :-)

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.

Have a different question or issue?

Start New Thread