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.
Responsive image on pagebuilder row background
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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.