CSS Backgrounds
The CSS background properties add background effects to elements.
In these chapters you will learn about these background properties:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(the shorthand property)
CSS background-color
The background-color property sets the background color of an element.
A color is usually written as a color name (like red), a HEX value (like #ff0000), or an RGB value (like rgb(255,0,0)).
Example
The whole page gets a light blue background.
<style> block, set the body background-color to lightblue. Add a heading and a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color.</p>
</body>
</html>
Other Elements
You can set the background color of any HTML element, not just the page.
Example
The <h1>, <div>, and <p> elements each get a different background color.
<style> block, make <h1> green, <div> lightblue, and <p> yellow. Add one of each element in the body so the three background colors show.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>This is a div with a light blue background.</div>
<p>This paragraph has a yellow background.</p>
</body>
</html>
Opacity / Transparency
The opacity property sets how transparent an element is, from 0.0 to 1.0. A lower value is more transparent.
Note: When you use opacity on an element, its child elements get the same transparency too. This can make text inside a faded element hard to read.
Example
The div has opacity 0.3, so both its background and its text are faded.
<style> block, give a <div> a green background and opacity of 0.3. Put some text inside the div so the lowered opacity (which also affects the text) is visible.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
background-color: green;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Opacity Example</h1>
<div>
<p>This div has opacity 0.3. The text inside it is faded too.</p>
</div>
</body>
</html>
Transparency using RGBA
If you do not want the child elements to fade, use an RGBA color instead. RGBA sets the opacity of the background color only, not the text.
An RGBA color is written as rgba(red, green, blue, alpha). The alpha is a number from 0.0 (fully transparent) to 1.0 (fully solid).
Example
The div background is 30% transparent, but the text stays fully readable.
<style> block, give a <div> a background of rgba(0, 128, 0, 0.3) (green at 30% opacity). Put some text inside the div, which should stay fully readable.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
background: rgba(0, 128, 0, 0.3); /* Green background with 30% opacity */
}
</style>
</head>
<body>
<h1>RGBA Transparency Example</h1>
<div>
<p>This div has a 30% transparent green background, but the text stays fully readable.</p>
</div>
</body>
</html>
The CSS Background Color Property
The property covered on this page is background-color, which sets the background color of an element.