In this lesson, we will look at some of the things you can do with backgrounds using CSS.
Color backgrounds
You can use the background-color
property to add pure-color backgrounds to almost every HTML component. This is a commonly used method to draw users' attention to selected parts of the webpage. For instance, you can highlight certain columns or rows in a table by specifying background colors.
Another typical styling for tables is the zebra stripping.
Of course, you can micromanage individual rows in the table, but there is a better way. You can use a pseudo-selector called :nth-child
.
By passing the parameter even
, the styling will be applied to all even number rows of the table.
Colored backgrounds are also frequently combined with the :hover
pseudo-selector to add more interactivity to the webpage. For instance, in the following example, when the cursor is hovered over the table, the corresponding row will be highlighted.
Image backgrounds
Besides pure-color backgrounds, it is also possible to create image-based backgrounds using the background-image
property. For example,
url()
is a CSS function used to load external resources. It works similarly to the src
attribute, which we discussed before with the <img>
element.
You can either load local image files like this:
1url(/images/image.png)
Or load remote files by specifying the full domain:
1url(https://images.unsplash.com/photo-1707843745563-d46b8ffb82fe?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgwNzg4MjZ8&ixlib=rb-4.0.3&q=85)
Image size
As you can see from the demo, the image is too big for the <div>
element. You can customize the size of the image using background-size
.
1p {
2 /* . . . */
3 background-image: url(. . .);
4 background-size: 100px;
5 /* background-size: <width>; */
6 /* background-size: <width> <height>; */
7}
If you don't know the size of the <div>
element and want the browser to choose a size for you. You can use the keywords cover
or contain
.
1p {
2 /* . . . */
3 background-image: url(. . .);
4 background-size: cover;
5 /* background-size: contain; */
6}
cover
will make the image just large enough to cover the entire space of <div>
, and contain
will make the image just large enough to fit inside <div>
.
Image repeat
By default, the image will be repeated both horizontally and vertically, if a single images is not enough to fill the entire <p>
element's background. You can turn off that behavior by setting background-repeat
to no-repeat
.
1p {
2 /* . . . */
3
4 background-image: url(. . .);
5 background-size: contain;
6
7 background-repeat: no-repeat;
8}
Or, in some cases, you might need to enable only horizontal or vertical repeat:
1p {
2 /* . . . */
3
4 background-image: url(. . .);
5 background-size: contain;
6
7 background-repeat: repeat-x;
8 /* background-repeat: repeat-y; */
9}
Image position
Lastly, notice that the repeated background image always starts from the top left corner. You can customize that by setting the background-position
property, which takes two values, one horizontal position and one vertical position.