How to Set Background Color in HTML

First thing you should know is that there are 3 types of HTML colors: Hex color codes, HTML color names and RGB values. To choose your preferred color use our Color Picker tool.

Let’s start from the easiest way of setting a background color:

1. Add the background-color Property to the <body> Element

The background-color property is used to change the background color. Inserting it to the <body> element you will have a full colored cover of the page.

Example of the background-color property in <body>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      body {
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body></body>
</html>

You can also add a background color for specific elements in your document. For example, let’s see how to change the color of the heading and paragraphs.

Example of a background color for specific elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {background-color:#e6ebef;}
      h2 {background-color:#8ebf42;}
      p {background-color:#1c87c9;}
    </style>
  </head>
  <body>
    <h2>Some heading with green background.</h2>
    <p>Some paragraph with blue background.</p>
  </body>
</html>

2. Add style Attribute to the <body> Element

It is also possible to set a background color for an HTML document by adding style="background-color:" to the <body> element.

Example of setting a background color with style attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body style="background-color:#1c87c9;">
    <h1>Some heading</h1>
    <p>Some paragraph for example.</p>
  </body>
</html>

3. Create a Gradient Background

Gradient backgrounds let you create smooth transitions between two or more specified colors.

There are two types of gradient backgrounds: linear-gradient (goes down/up/left/right/diagonally) and radial-gradient (defined by their center).

In linear-gradient backgrounds you can set a starting point for the colors. If you don't mention a starting point, it will automatically set "top to bottom" by default.

Example of a linear-gradient background:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #grad {
      height: 500px;
      background-color: blue; /* For browsers that do not support gradients */
      background-image: linear-gradient(to right, #1c87c9, #8ebf42);
      }
    </style>
  </head>
  <body>
    <h1>Right to Left Linear Gradient background</h1>
    <div id="grad"></div>
  </body>
</html>

The given example shows a linear gradient that starts from the left. It starts from blue, transitioning to green. Change it according to your requirements.

In radial gradient backgrounds the starting point is defined by its center.

Example of a radial-gradient background:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #grad {
      height: 500px;
      background-color: grey; /* For browsers that do not support gradients */
      background-image: radial-gradient(#e6ebef, #1c87c9, #8ebf42);
      }
    </style>
  </head>
  <body>
    <h1>Radial Gradient Background</h1>
    <div id="grad"></div>
  </body>
</html>

Note that Internet Explorer 9 and earlier versions do not support gradients.

You can also adjust the percentages of your colors (how spaced out the colors to be) like this: (color1 30%, color2 50%, color3 20%).

4. Create a Changing Background

You can create a background which will change its colors in the mentioned time. For that use, add the animation property to the <body> element. Use the @keyframes rule to set the background colors through which you'll flow, as well as the length of time each color will appear on the page.

Example of a changing background:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      -webkit-animation: colorchange 20s infinite; 
      animation: colorchange 20s infinite;
      }
      @-webkit-keyframes colorchange {
      0%  {background: #8ebf42;}
      25%  {background: #e6ebef;}
      50%  {background: #1c87c9;}
      75%  {background: #095484;}
      100% {background: #d0e2bc;}
      }
      @keyframes colorchange {
      0%  {background: #8ebf42;}
      25%  {background: #e6ebef;}
      50%  {background: #1c87c9;}
      75%  {background: #095484;}
      100% {background: #d0e2bc;}
      }   
    </style>
  </head>
  <body>
    <h1>Changing Background</h1>
  </body>
</html>

The percentages are the animation length which are mentioned in "colorchange" (e.g. 20s).

You can change the time and colors to achieve your preferred result.


Do you find this helpful?

Related articles