CSS background-image property
The background-image property in CSS is used to set one or more background images for an element. This property is incredibly versatile and allows you to add visual interest to your web pages by using images as backgrounds. These images can be anything from simple patterns to complex graphics or photographs.
Basic Usage
The basic syntax for the background-image property is:
selector {
background-image: url('image-path');
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of using a background image in CSS.</p>
</body>
</html>
In this example, the entire webpage will have a background image called background.jpg.
Setting Multiple Background Images
You can set multiple background images for an element by separating the image URLs with commas:
div {
background-image: url('image1.png'), url('image2.png');
}
In this case, image1.png will be layered on top of image2.png.
Image Values
1. URL
The most common way to set a background image is by using a URL to the image file:
section {
background-image: url('images/pattern.png');
}
2. Gradient
CSS also allows you to set gradients as background images using linear-gradient or radial-gradient:
header {
background-image: linear-gradient(to right, red, yellow);
}
3. None
To remove a background image, you can set the background-image property to none:
footer {
background-image: none;
}
Combining with Other Background Properties
The background-image property is often used in conjunction with other background-related properties to control how the image is displayed:
1. Background Size
The background-size property defines the size of the background image.
div {
background-image: url('background.jpg');
background-size: cover; /* Scales the image to cover the entire element */
}
Common values for background-size:
cover: Scales the image to cover the entire element, even if it has to stretch.contain: Scales the image to be fully visible, without stretching.- Specific dimensions: e.g.,
background-size: 100px 50px;
2. Background Repeat
The background-repeat property controls whether and how the background image repeats.
div {
background-image: url('pattern.png');
background-repeat: repeat; /* Repeats both horizontally and vertically */
}
Common values:
repeat: Repeats the image both horizontally and vertically.repeat-x: Repeats the image only horizontally.repeat-y: Repeats the image only vertically.no-repeat: Does not repeat the image.
3. Background Position
The background-position property sets the initial position of the background image.
div {
background-image: url('logo.png');
background-position: center top; /* Positions the image at the center-top */
}
Common values:
- Keywords like
left,center,right,top,bottom. - Specific units, e.g.,
50px 100px.
4. Background Attachment
The background-attachment property determines whether the background image scrolls with the content or stays fixed.
body {
background-image: url('background.jpg');
background-attachment: fixed; /* The image stays fixed as you scroll */
}
Common values:
scroll: The background image scrolls with the content.fixed: The background image stays fixed when the page is scrolled.local: The background image scrolls with the element's content.
5. Background Clip and Origin
background-clip: Specifies the area within which the background is painted (e.g.,border-box,padding-box,content-box).background-origin: Specifies the origin position of the background image (e.g.,border-box,padding-box,content-box).
Practical Examples
Full-Page Background Image
body {
background-image: url('full-background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Patterned Background
section {
background-image: url('pattern.png');
background-repeat: repeat;
background-size: 50px 50px;
}
Overlaying a Gradient on an Image
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('header-background.jpg');
background-size: cover;
}