How to Remove Background Image in CSS?

Find out how you can remove all (or hide some) background images using CSS

To remove background image in CSS, you can set the property background-image to none like so:

.selector {
    background-image: none;
}

Alternatively, you could also set the background-size to 0, like so:

.selector {
    background-size: 0;
}

background-size: 0 could be especially useful for example, if you want to hide some images when using multiple backgrounds, as opposed to hiding all of them as with background-image: none. For example:

.selector {
    background-image: url(1.jpg), url(2.jpg), url(3.jpg);
    background-size: cover, 0, contain;
}

This would hide the second background image, whilst showing the rest of them.

If neither of the above mentioned style rules work for you, then you might want to check the following:

  1. Check your style rule's selector specificity;
  2. Make sure the style rule isn't being overridden by the same property being specified elsewhere for the same element, but with a higher importance (e.g. by using !important, or by specifying it in the style attribute, etc.).

Hope you found this post useful. It was published . Please show your love and support by sharing this post.