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.