CSS background color property

How can you set the background color of an HTML element?

You can set the background color of an element using several different color formats. These include:

Color name – e.g., red
HEX value – e.g., #ff0000
RGB (Red, Green, Blue) – e.g., rgb(255, 0, 0)
RGBA (Red, Green, Blue, Alpha) – e.g., rgba(255, 0, 0, 0.5)

HTML

<div class="demo-container">
  <p>background-color: #FFFFFF;</p> 
  <p>background-color: rgb(255, 255, 255);</p>
  <p>background-color: rgba(255, 255, 255, 1.0);</p>
  <p>background-color: rgba(255, 255, 255, 0.6);</p> 
  </div>

CSS

.demo-container {
  padding: 1.4rem;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 2rem; 
}

.demo-container p {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.demo-container p:nth-child(1)  {
/* HEX value (white ) */
  background-color: #FFFFFF;s
}

.demo-container p:nth-child(2)  {
/* white RGB background color */
  background-color: rgb(255, 255, 255);
}

.demo-container p:nth-child(3)  {
/* white RGBA background color without transperancy */
  background-color: rgba(255, 255, 255, 1.0);
}

.demo-container p:nth-child(4)  {
/* white RGBA background color with 64% transperancy */
  background-color: rgba(255, 255, 255, 0.64);
}

HTML and CSS

Background color

How can you set the background color of an HTML element?

About the author