Background Color

This page contains HTML background color code. Using this code, you can add a background color to any HTML element.

To add background color to an HTML element, you need to use the CSS background-color property. You can also use the background property, which allows/requires you to add other background related properties at the same time.

Here are some examples of applying background color to an HTML document.

The background-color Property

The CSS background-color property allows you to apply background color to an HTML element. In the following example, we apply background color to a div element. To demonstrate the example, we place some text within the <div> element and color it black. We also add a black border around the <div> using the border property.

Source Code

Result

HTML background color example

Text and Background Color

You aren't limited to applying background color to the div element. You can apply it to any HTML element. For example, background color is sometimes applied to a large or small section of text. You can use the <span> element to pick a section of your text to highlight with a different color.

Example:

Source Code

Result

HTML text background color example

The background Property

As mentioned, the CSS background property allows you to add all your background related properties all in one go.

This is more efficient, especially if you're applying many background properties.

Here's an example of using the background property.

Source Code

Result

HTML background image example

Background Images

You can also apply background color by using a background image. This will also allow you to add some "texture" to your background color, or even a background pattern. But even if you do use a background image, it's good practice to use a background color as well. This ensures that, in the event your background image can't be displayed, the background image will still display.