Combine Multiple Background Properties
In this step, you'll learn how to combine multiple background properties to create more complex and interesting background designs. We'll modify the styles.html file in the ~/project directory to demonstrate advanced background styling techniques.
Update the styles.html file with the following content:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Background Properties</title>
<style>
.image-container {
width: 600px;
height: 400px;
border: 2px solid black;
margin: 20px;
color: white;
font-weight: bold;
padding: 20px;
}
.multiple-backgrounds {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("background-sample.jpg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.layered-backgrounds {
background-image:
url("small-pattern.png"), linear-gradient(to right, #ff6b6b, #4ecdc4);
background-size:
100px 100px,
cover;
background-position:
top left,
center;
background-repeat: repeat, no-repeat;
}
</style>
</head>
<body>
<div class="image-container multiple-backgrounds">
Overlay Background with Image
</div>
<div class="image-container layered-backgrounds">
Layered Background with Pattern and Gradient
</div>
</body>
</html>
First, download a small pattern image:
wget https://labex.io/courses/images/small-pattern.png -O ~/project/small-pattern.png
This example demonstrates two advanced background techniques:
-
Multiple Backgrounds with Overlay:
- Uses a linear gradient to create a semi-transparent overlay
- Combines the gradient with a background image
- Applies consistent sizing, positioning, and repetition
-
Layered Backgrounds:
- Combines a repeating pattern image with a linear gradient
- Uses different sizing and positioning for each background layer
When you open this HTML file in a browser, you'll see how multiple background properties can create complex and visually interesting designs.
