It’s possible to change background color with CSS to any color you want your container background to be. There is more than one way to apply the background color change.
There is 2 CSS codes which can be used:
background:;
background-color:;
How to set the background color of container inline with In HTML With CSS
First, make a box or use one there is already there.
I will use both kind of codes in the Example:
<div style="width:33%;height:100px;background-color:red;"> </div>
<div style="width:33%;height:100px;background-color:blue;"> </div>
<div style="width:33%;height:100px;background:green;"> </div>How to set the background with hex color code
Hex color code allows for more specific color variation.
Example:
<div style="width:33%;height:100px;background-color:#a061d8;"> </div>
<div style="width:33%;height:100px;background-color:#1c7db7;"> </div>
<div style="width:33%;height:100px;background:#e9184c;"> </div>How to set the background with RGBA color code
RGBA color code allows for more specific color variation, and to set transparency which is the last number in the RGBA code.
Example:
<div style="width:33%;height:100px;background-color:rgba(12,113,195,0.1);"> </div>
<div style="width:33%;height:100px;background-color:rgba(124,218,36,0.78);"> </div>
<div style="width:33%;height:100px;background:rgba(142,111,131,0.35);"> </div>Change Background Color With CSS Based On ID or Class
You can either put this in a style tag or assign it in a CSS file and link it to the HTML file. If it’s for a website built in a CMS, then there properly is a place where you can write in custom CSS.
For this demonstration, I am using the style tag for the CSS.
You need to assign the HTML elements classes or ID if they do not already have that.
CSS
ID = #
Classes = .
<style>
.box{
height:100px;
width:33%;
}
.redbox{
background-color:red;
}
.bluebox{
background-color:blue;
}
#greenbox{
background-color:green;
}
</style>
<div class="box redbox"> </div>
<div class="box bluebox"> </div>
<div class="box" id="greenbox"> </div>