Backgrounds play a vital role in how a webpage looks.
CSS provides various options to style backgrounds, such as changing colors, adding images, and controlling their placement.
The key background properties include background-color, background-image, background-repeat, background-attachment, and background-position.
Next, we'll dive into each of these properties in detail.
The background-color property sets the color behind an element's content.
For instance, here's how to change the background color of an entire page:
body {
background-color: #f0e68c;
}Colors in CSS can be specified using color names (like "red"), HEX values (like "#ff0000"), or RGB values (like "rgb(255, 0, 0)").
Check out our CSS color tutorial to learn more.
The background-image property sets an image as the background of an HTML element.
Here's an example of setting a background image for the entire page:
body {
background-image: url("images/tile.png");
}Note: Be cautious when choosing background images to ensure they don't hinder text readability.
Tip: By default, background images repeat both horizontally and vertically to fill an element. You can change this behavior using background-repeat.
The background-repeat property controls how background images are tiled or repeated.
For instance, here's an example of creating a gradient background by repeating a sliced image horizontally:
body {
background-image: url("images/gradient.png");
background-repeat: repeat-x;
}Similarly, you can use repeat-y to repeat vertically or no-repeat to prevent repetition.
body {
background-image: url("images/texture.png");
background-repeat: no-repeat;
}Check out the illustration below to understand this better.
The background-position property determines where a background image is positioned.
If no position is specified, the image starts from the top-left corner of the element (i.e., (0,0)).
Here's an example:
body {
background-image: url("images/robot.png");
background-repeat: no-repeat;
}In this example, the image is positioned at the top-right corner.
body {
background-image: url("images/robot.png");
background-repeat: no-repeat;
background-position: right top;
}Note: When using two values for background-position, the first represents horizontal position and the second represents vertical position. If only one value is given, the second defaults to center.
Aside from keywords, you can also use percentages or length values (like px or em).
Check out the illustration below for a clearer understanding.
The background-attachment property decides whether a background image scrolls with the page or stays fixed.
Here's an example to illustrate:
body {
background-image: url("images/bell.png");
background-repeat: no-repeat;
background-attachment: fixed;
}While there are many individual background properties, you can combine them into one shorthand property to save time and space.
The background property combines background-color, background-image, background-repeat, background-attachment, and background-position into one. Here's how:
body {
background-color: #f0e68c;
background-image: url("images/smiley.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 250px 25px;
}Here's the shorthand version of the same:
body {
background: #f0e68c url("images/smiley.png") no-repeat fixed 250px 25px;
}When using background, remember the order of property values:
If you leave out a value, the default for that property will be used.
Note: Background properties don't inherit like colors do, but the parent's background will show through by default because of the transparent value.