In CSS, if we want to set the background color of an element, we use the background-color
property. For example, background-color: red;
sets the element’s background color to red, background-color: yellow;
to the yellow background, and so on.
But, there may be situations where an element already has some background color and you want to remove it now. For example, you are working on an old project which has a really bad color scheme and you want to change things now.
How would you do that?
Well, there are two ways to do that. These are as follows:
In this article, I will explain both methods in detail and also some key points to remember while doing this.
Method 1: Remove Existing Background Color by Making it Transparent
The simplest way to remove any existing background color from an element is to make it transparent. When you make the background color of an element transparent, it will not be visible, doesn’t matter what background color have you applied to the element.
Let’s say we have two subheadings (<h2>) in our HTML document.
<h2 class="no-background">Heading with transparent background</h2> <h2>Heading with yellow background</h2>
Now, we want don’t to keep any background color on the first subheading i.e. subheading with class="no-background"
.
To achieve that, we can set its background-color property to transparent
. This will make the existing background color fully transparent and it will look like there is no background color applied to the element.
/* Apply yellow background color on all subheadings */ h2{ background-color: yellow; } /* Make background color fully transpaernt */ .no-background{ background-color: transparent; }
Below is the outcome of the above code:
As you can see from the above image, the background color of the first subheading is not visible because we have set its background-color
property to transparent
.
Method 2: Remove Existing Background Color Using background: none
The second method to remove the background color of an element is to set its background property to none
.
When you set the background
property of an element to none
, it means that no background color or image will be applied to the element.
If there is any existing background color applied to the element and you set the background property to none, that existing background color will be completely removed from the element i.e. all existing background colors and images will be overridden by the value none
.
Let’s take the same example again, and see if it works:
<h2 class="no-background">Heading with No background</h2> <h2>Heading with yellow background</h2>
Now, set the background
property to none
to remove the existing background color from the first subheading:
/* Apply yellow background color on all subheadings */ h2{ background-color: yellow; } /* Remove background color completely */ .no-background{ background: none; }
… And here is the outcome of the above code:
Bingo! the background color is completely removed from the first subheading.
background-color: transparent OR background: none Which One Should You Use?
In the above two examples, we saw that both methods can remove the existing background color from an element. Now, the biggest question arises, which approach should you choose?
The answer depends on your requirements.
If you want to remove only the existing background color of the element, you should choose the first approach i.e. apply background-color: transparent;
.
This is because, when you set the background-color
property to transparent
, only the element’s background color is affected, the background images remain the same.
To explain this, let’s take an example, which has a div element with a yellow background color and a background image:
html:
<div> My Div Element </div>
And here is the CSS applied to it:
div{ height: 250px; width: 250px; border: 2px solid crimson; background-color: yellow; text-align: center; background-image: url(transparent-tree.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
This is how it is looking after applying the above CSS:
Now, if we use the background-color: transparent;
to remove its background color, it will only remove its yellow background color, not the background image. See the following image:
But, if we use the background: none;
to remove its background color, its background color and background image both will be removed. This is because background: none;
overrides all existing background properties. See the result in the following image:
I think now you got the answer when you should choose which approach.
Conclusion
In this article, we learned how we can remove the existing background color from an element.
To remove the existing background color of an element, you have two approaches. First, make the existing background color transparent by setting the background-color
property to transparent
.
Second, completely remove the background color from the element by setting its background
property to none
.
Thanks for reading.