Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
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.
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.
After applying this change it looks great on the mobile device but from the desktop browser, it zooms in on the image. Any thoughts?
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%;
}
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.