How to change background color in CSS?

In this tutorial, we will learn about the CSS background-color property, and how to change background color of an element in CSS? By Apurva Mathur Last updated : July 26, 2023

Color is one of the important things when you are developing a website for real scenarios. The color attracts the audience, they tend to put more energy and time into reading your content if the color used on the website is really impressive. Color is the language in itself. It is something that can trigger many responses- grabbing audience attention, and changing their perception of your business.

Changing background color with CSS

To change the background color of any element or a webpage, you can use the CSS background-color property by providing the color name or color code of the color that you want to fill in the background.

Syntax

Set the background color for a page by color name:

body{
  background-color: red;
}

Set the background color for a page by color code:

body{
  background-color: #ff00ff;
}

Example for changing background color of an elements using CSS

In the below-given example, we are setting the background color of the elements in a webpage along with the background color of the webpage.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <style>
    body{
    background-color: #b3d4fc;
    }
    .div1{
    background-color: rebeccapurple;
    color: white;
    width: 100%;
    height: 80px;
    text-align:center;
    font-weight: bolder;
    font-family: "Lucida Console";
    font-size: 30px;
    }
    .div2{
    margin-top: 30px;
    background-color: rosybrown;
    color: white;
    width: 100%;
    height: 80px;
    text-align:center;
    font-weight: bolder;
    font-family: "Lucida Console";
    font-size: 30px;
    }
    .div3{
    margin-top: 30px;
    background-color: palevioletred;
    color: white;
    width: 100%;
    height: 80px;
    text-align:center;
    font-weight: bolder;
    font-family: "Lucida Console";
    font-size: 30px;
    }
  </style>
  <body>
    <h1>Hello world</h1>
    <div class="div1">
      Include help welcome's you
    </div>
    <div class="div2">
      Include help welcome's you
    </div>
    <div class="div3">
      Include help welcome's you
    </div>
  </body>
</html>

The output of the above example is:

Explanation

In the above code, the background color is applied to the body and also to a particular tag. The syntax is the same the only difference is when you want to apply on the whole screen then you have to apply background-color property on the body as I did above, but if you want to apply to any particular element then in that case we can simply use class selector or the element itself it will work same.

CSS Examples »

How to Create CSS3 Keyframe Animations?

Change Cursor Color with CSS caret-color Property