How to Remove Background Image in 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.).

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.