Hiya.
I am trying to add background images to different rows, but they are getting cropped, but I would like to display them full size. I resized them several times in photoshop, but no improvement. Also, the resolution changed when displayed in a row (blurry).
Any suggestions how to avoid this issue?
Thank you.
Hi Jerry,
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
This is a private message.
This is a private message.
Thank you, Alex. Is there any custom css I can use to change that? Or what size does the image has to be to fit?
I looked at the MDN doc, but I find it difficult to understand as I am a beginner.
Hi Jerry,
The MDN doc is basically the specifications of the CSS property used to make the image responsive. There’s no way to change it (outside of removing the functionality*)and no matter what you do, there will, at one point or another be cropping. It’s annoying but compared to how it was prior to it’s introduced – it’s a welcome change.
To remove the functionality please add the following CSS to WP AdminAppearanceCustom CSS
#pg-231-1 .panel-row-style { background-size: initial; background-repeat: repeat; }You might also need to install the SiteOrigin CSS Editor.
Please note that this will, however, make your image repeated. Obviously you could remove that but… well it would look really weird without it being repeated.
Hi Alex.
Thank you so much.I added the css and it changed. I am nearly there, but the repeat doesn’t work for me. Could you please tell me how to show only one image as a background for the entire row. I can change the size of the image, if this causes the issue, but I am not sure what the correct size would be. Thank you!
Hi Jerry,
There’s no correct size. As described, there’re only two real options here for a background image. What you’re after, which will require cropping at lower resolutions, and repeated backgrounds. Obviously, you could display the repeated background but you would end up with something far worse than both.
An alternative option actually. Switch to an image widget and display the background that way. Set the row as full width stretched and you should be able to use the image as originally desired. Responsive images are handled in a much better manner than responsive backgrounds in CSS.