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 CodeResult
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.


Source CodeResult

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 CodeResult
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.

About was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents. aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site HOSTEK provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!