How do you remove the animated gradient background on image or video elements?

On images or video elements, if you resize the main content to be smaller than the box containing it, you get this animated gradient grey/white background. Is there a way to remove that and just have it be plain white?

Builder content link

Builder public api key
aa946438110c458eb51a41a466788717

Video Example

Hi @Bigjoe,

Welcome to the builder.io forum.

This seems to be a very strange issue, some additional CSS is overriding the images and video CSS background property, to resolve this you can override the background of img and video tags with the below code

.builder-blocks img, .builder-blocks video{
    background: #fff;
}

Let us know if you have any further questions. Thank you!


Hi @Bigjoe!

Another solution to resolve this issue is that you can change the individual image’s aspect-ratio to 1.

Thank you Manish! Your CSS fixed the issue.

I thought this background effect was some odd thing Builder was doing, it sounds like, from your response, that this was coming from our CSS?

Your aspect ratio fix makes sense, except the reason I was messing with the aspect ratio was to make sure that the add to cart button was above the fold on mobile.

Thank you!

1 Like