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?
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.
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 :-)