The background-image property sets one or more images as the background of an element. These images are drawn on top of the background-color and will sit behind the element's content. This property is key for creating visually rich and textured designs.
Example 1: Setting a Single Background Image
/* style.css */
.image-one {
/* Sets a single background image from a URL */
background-image: url('https://via.placeholder.com/300/CCCCCC/FFFFFF');
height: 200px; /* Define height to ensure the background is visible */
border: 1px solid black;
}
Explanation
This code uses the url() function to specify the path to an image file. The image is then placed as the background for the element with the class .image-one.
Example 2: Using Multiple Background Images
/* style.css */
.image-two {
/* Sets two background images; the first one is layered on top */
background-image: url('https://via.placeholder.com/100/FF0000/FFFFFF'), url('https://via.placeholder.com/300/0000FF/FFFFFF');
background-repeat: no-repeat; /* Prevents the images from tiling */
height: 200px;
border: 1px solid black;
}
Explanation
You can layer multiple background images by providing a comma-separated list of url() values. The first image in the list is the topmost layer.
Example 3: Applying a Gradient
/* style.css */
.image-three {
/* A linear gradient is treated as a background image */
background-image: linear-gradient(to right, steelblue, lightblue);
height: 200px;
}
Explanation
CSS gradients, such as linear-gradient(), are generated by the browser and treated as images. This example creates a smooth color transition from steelblue to lightblue across the element.
Example 4: Combining an Image and a Gradient
/* style.css */
.image-four {
/* Combines a semi-transparent gradient on top of an image */
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.5)), url('https://via.placeholder.com/400');
height: 200px;
color: white;
text-align: center;
line-height: 200px; /* Vertically centers the text */
}
Explanation
This demonstrates layering a semi-transparent blue gradient over a background image. This technique is often used to tint images or improve the readability of text placed over them.
Example 5: Using a Radial Gradient
/* style.css */
.image-five {
/* Creates a circular gradient from the center outwards */
background-image: radial-gradient(circle, #8A2BE2, #FF1493);
height: 200px;
}
Explanation
The radial-gradient() function creates a gradient that radiates from a central point. Here, the gradient transitions from blue-violet at the center to a deep pink at the edges.
Example 6: Removing a Background Image
/* style.css */
.image-six {
background-image: url('https://via.placeholder.com/300');
}
.image-six-override {
/* The 'none' value removes any previously set background image */
background-image: none;
background-color: #f0f0f0; /* Add a fallback color */
height: 200px;
border: 1px solid black;
}
Explanation
The none keyword is used to specify that no background image should be displayed. This is often used to override an existing background-image style from another CSS rule.
Example 7: Using an SVG as a Background Image
/* style.css */
.image-seven {
/* Sets a scalable vector graphic (SVG) as the background */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>');
height: 200px;
border: 1px solid black;
}
Explanation
You can directly embed SVG code within the url() function. SVGs are vector-based, meaning they are resolution-independent and will appear sharp at any size.