Background Color
Elements can have background effects added to them using the CSS background properties.
CSS background-color
An element’s background color can be specified using the background-color attribute.
Example
The background color of a page is set like this:
body {
background-color: lightblue;
}
The most common way to specify a color in CSS is:
- a recognized color name, such as “red,” or a HEX value, such as “#ff0000.”
- an RGB number, such as “rgb(255,0,0)”
For an exhaustive list of all possible color values, see CSS Color Values.
Other Elements
You can set the background color for any HTML elements:
Example
Here, the <h1>, <p>, and <div> elements will have different background colors:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Opacity / Transparency
The transparency or opacity of an element is specified by its opacity property. It accepts values between 0.0 and 1.0. The more transparent, the lower the value:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
background-color: green;
opacity: 0.3;
}
Note: When an element’s background is made transparent via the opacity property, the transparency is passed down to all of its child elements. This may make it difficult to read text contained within a fully translucent element.
Transparency using RGBA
Use RGBA color values if you don’t want to apply opacity to child elements, as we did in the previous example. The example below adjusts the opacity of the backdrop color rather than the text:
100% opacity
60% opacity
30% opacity
10% opacity
RGB can be used as a color value, as you discovered in our CSS Colors Chapter. You can utilize an RGB color value with an alpha channel (RGBA), which defines a color’s opacity, in addition to RGB.
The notation for an RGBA color value is rgba(red, green, blue, alpha). A number between 0.0 (completely transparent) and 1.0 (totally opaque) represents the alpha parameter.
Advice: Check out our CSS Colors Chapter for additional information on RGBA colors.
Example
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
The CSS Background Color Property
| Property | Description |
|---|---|
| background-color | Sets the background color of an element |
