Win 11, latest Chrome.
Builder preview and frontend discrepancies (featured image) after update. Used featured image as background image for cards on the homepage; it was not respecting object-fit: cover. When I changed the image size (e.g. to medium, small, large, whatever), it got back to normal.
Hi Daniel,
Thanks for your report!
However, I’m not exactly sure how to reproduce the problem—I’ve tried using the limited information you’ve provided, but I can’t seem to replicate the issue.
It would be great if you could test it again and see, if you can find a reproducible pattern 
I checked all the other Bricks sites and they seem to work fine. The difference is the other pages have been built properly, and this one is my first Bricks page, where I used the GUI instead of custom CSS, and in this specific homepage section, I used the background-image property instead of an absolutely position image.
All right, okay, but unfortunately I still can’t reproduce it. If there is a general issue with background images, other users will surely report it. For now, however, I can only assume that this was a temporary/specific issue on your site.
I’d check height/width/max-height/max-width of the img element and set em to 100%
The img src you are using is larger than the frame it’s object-fitting. Since it’s set to cover… and the frame item is covered… it won’t have a reason to scale down.
Background images don’t use the object-fit property. Use background-size instead.
It was set to default, and I just realized that default was background-size: cover; background-position: top left;
I have reclicked that, so it doesnt pull the default values BUT SPECIFICALLY USES cover and center center.
For some reason for this whole time, the preview was displaying the background as center center and so was the front end, but it looks like after the update, they changed the default values of background-position or it’s being red in a different way.
It looks like there were some issues with Bricks’ default values. The default for background-position is now top left in the GUI.
I don’t think this is a default Bricks setting, but rather a default browser setting, and the placeholder in the builder is just more or less informing you of that default that’s applied automatically.
When setting the background-image CSS property, the default background-position value, if not specified, is left top (or top left) or 0% 0%.
See MDN docs on this - background-position CSS property - CSS | MDN .
Unfortunately, I can’t tell you why that is, but as far as I can tell, we’ve never had defaults for background position; we’ve always used the browser’s default, which is left top:
The most logical explanation for this would be that you used a class with those settings, but then either removed it or even deleted it.
Apart from the fact that no other user has reported the same problem so far, and I still can’t reproduce it.
Nope, there was no such class, but since the defaults are NOT defaults (but a hint as @josh_mitch mentioned) aimed at pointing to how browsers treat the defaults, I suspect it might have been either Bricks’ or my own stylesheet conflict that manifested after a few updates, which might have caused a change in CSS declaration priority. ANYWAY: It works properly now AFTER I DEFINES THE BACK BACKGROUND POSITION TO CENTER CENTER MANUALLY, SO THE PROBLEM IS SOLVED. From now on, I’ll remember not to ‘leave blanks,’ to avoid surpirses in the future.
