Front page widget background image size on mobile

When I view a moesia based website on a mobile device, I notice that the background image(s) on the front page widgets don’t have the paralax effect. You’ve described why you disabled that for mobile in other posts and I agree with that. My question is, why did you also change background-size from “cover” to “auto” on mobile? I created an example on:

that uses the exact same background image for the Services and Employees sections. I have used custom css to force background-size to “cover” for the Services area so you can see the difference in images when looking at the site in mobile. It seems to me that using “background-size: cover” is better than auto even in mobile. Is there a reason I’m not aware of that we should be using “auto” here? If not, can we get that change made to the base theme? I can always continue to use custom css to override the value, but I thought maybe others might prefer “cover” as well.

When I tested this it didn’t look right with cover. As far as I remember if you use an image with a smaller height it would look really bad if the row has a big height. And the rows usually have a pretty big height on mobiles. The image you’re using is huge so this isn’t an image, but in other circumstances it won’t be right. But I’ll do another round of tests to see if there is a reason to make this change in the theme.

Ahh, I hadn’t thought about that scenario. In our specific case, my wife was complaining about it on a small height Call to Action section with a photo that was large enough to cover the area.

Just thinking out load, would “background-size: auto 100%;” fix the issue with the large section with small height photo you were mentioning?

Answering my own question, no, “background-size: auto 100%” leads to problems that sometimes, the photo doesn’t extend to the whole width of the window which looks terrible. Hopefully your tests show “background-size: cover” works for the cases you are worried about. If not, I can always override it to use cover for the specific case we’re having problems with.