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.
1div {
2 /* . . . */
3
4 background-image: url(. . .);
5 background-size: 100px;
6
7 background-repeat: repeat;
8 background-position: bottom right;
9}Gradient backgrounds
Gradient can also be used as the background. In CSS, gradients are generated with the functions linear-gradient(), radial-gradient(), or conic-gradient(), and the output of these functions are treated as images, not colors, so you must use the background-image property in this case.
The linear-gradient() function is the most commonly used option. It takes three parameters: the direction, the starting color, and the finishing color.
The direction can be either a numeric value in degrees (30deg, 60deg, and so on) or keywords such as to top, to bottom, to left, and so on.
For the other two gradient functions, we will talk about them in detail later in the gradient lesson.
Background attachment
The last key point we must discuss regarding background is the background-attachment. It defines whether or not the background moves when the content scrolls. The background-attachment property accepts two values, scroll or fixed.
When set to scroll, the background image will scroll with the content. When set to fixed, the background image will not move when the content scrolls.
The background shorthand
background is a shorthand property for all background properties discussed above.
1background: red;
2background: url("/image.png") repeat-y;