Is there a way to make the background image in a row that is scaled to fill shrink/reduce in size to show the whole image on smaller devices. Right now it is responsive, but the image remains large. Can the image reduce in size when displayed on smaller devices (i.e. iphone, smartphone, etc.)?
Check out: https://www.quickpictours.com. I’d like to see the whole house when viewing on my android phone.
Hey David,
You can try playing around with the background-size property within a media query or just change the background image with a taller image instead of a wider one, still via media query. I would prefer the latter for reasons explained below.
Basically, a background image, or any other background, scales to fit to its content. For your case, on mobile, the height remains the same while the width doesn’t and since its background-size is set to fill or cover, it tries its best to do so causing it to crop the image on its sides to reduce the width just to maintain its aspect ratio. I’ve an image below showing possible scenarios.
http://imgur.com/q3HncgR
The first image on the left side, is what’s going to happen if we want the background image to scale without cropping while maintaining its aspect ratio. This will only happen if we set the Scale to fit. Second image is what happens if we want the background image to scale without cropping. The entire image is there but it is stretched out to fill the content. Third image is what I suggest above, playing around with the background size and position property. The entire house is seen, as what was wanted, but it is still a bit stretched.
So I would suggest using a separate background image for mobile, preferably a tall image so it scales well. I can provide a CSS for that. I can also provide the CSS I used for the third scenario above if you want. Also, sorry for the lengthy reply. I just thought that several others may want to know how this works as well. 
Ben
Was the css ever given for this? Having the same issue on my end with two rows that are full width.
No. We just decided to keep things the way they were. However, I’d love to see some code from Ben or any of the other support staff for anything that would slightly modify it. Our text was too large for our main image to be responsive.
Thanks for taking the time to respond. Yes, very interested in knowing a way to do this as well. My designs are really limited by not being able to show text across an image where the image’s focal point isn’t the center. Your image works decently as its focal point is in the center of it.
Interested in hearing from support.
Hey guys,
The only solution I would advise is to change the background image on mobile view. You can check the KB article below for more info.
http://forum.wpbeaverbuilder.com/knowledge-base/change-row-background-image-on-mobile-view/
If you still want to play around with the background-position, you can use the exact same CSS snippet provided on the link above, just change background-image to background-position. You may need to add more media queries for different widths though. More info on background-position below.
https://css-tricks.com/almanac/properties/b/background-position/
Hope this helps!
Ben