Flash cards
Review the key moves
What is the main idea behind CSS Backgrounds?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-color: lightblue;Put the learning moves in the order that makes the concept easiest to apply.
The CSS background properties are used to add background effects for elements.
In these chapters, you will learn about the following CSS background properties:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (shorthand property)
CSS background-color
The background-color property specifies the background color of an element.
Example
body {
background-color: lightblue;
}Live preview
With CSS, a color is most often specified by:
- a valid color name - like "red"
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
Look at CSS Color Values for a complete list of possible color values.
Other Elements
You can set the background color for any HTML elements:
Example
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}Live preview
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
background-color: green;
opacity: 0.3;
}Live preview
Note
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
100% opacity
60% opacity
30% opacity
10% opacity
You learned from our CSS Colors Chapter , that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGB A ) - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha ). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Tip
You will learn more about RGBA Colors in our CSS Colors Chapter .
Example
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}Live preview
The CSS Background Color Property
| Property | Description |
|---|---|
| background-color | Sets the background color of an element |