How to Remove Background Color in CSS

If you're looking to remove the background color from an existing element in your CSS, then you've come to the right place.

Removing a background color is actually quite easy and can be done with just one line of code.

Remove Background Color using background:none #

First off, let's assume that we already have an element in our HTML page with a red background-color set for it.

<div style="background-color:red;">
  My div
</div>

Now all we need to do is add this single line of code into our CSS file. div{background:none;}

This will override any previously assigned value for "background-color" or "background" on this particular element.

You can also use the !important declaration. It makes sure that this style takes precedence over any other styles that might be applied to the same element.

Remove Background Color by making it transparent#

Add "background-color:transparent;" directly after any other styling rules applied on that specific selector.

This will override any existing styling rule like setting a certain color for example red in our case here and make it transparent instead of having any solid color as its default value. It should look something like this:-

By adding "background-color:transparent;" we are telling our browser not display anything behind our targetted elements.