How to Add Background Image with CSS
Let us demonstrate how you can add and position a background image in an HTML document with CSS styles.
How to position a background image.¶
- background-image: defines one or more background images for the element.
- background-repeat: specifies if/how a background image is repeated.
- background-attachment: defines whether a background image scrolls with the rest of a page or is fixed.
- background-position: defines the starting position of a background image.
Example of adding a background image:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url('https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
</body>
</html>
Result
In the example above, the background image is positioned in the center (you can also use other values such as left top; left center; left bottom; right top; right center; right bottom; etc.).
Here are some ways of positioning a background image:
To repeat a background image, you can use the following values:
- repeat, which repeats the background image vertically and horizontally,
- repeat-x, which repeats the background image only horizontally,
- repeat-y, which repeats the background image only vertically.
Example of adding a background image repeated vertically:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
In the example above, the background image is repeated only vertically.
Use the "no-repeat" value so as the background image won't be repeated (the image will only be shown once).
Example of adding a non-repeated background image:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
CSS3 introduced the background-size property, which helps us to control the background-image size as displayed in its parent element. In the following example, as a background-size value, we use “cover”, which scales the background image as much as possible so that the background image entirely covers the area.
To create a full-page background image, also add a background image to the container with the height set to 100%.
Example of adding a full-page background image:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
To add a transparent background image, you need the opacity property, which specifies the transparency of an element. Take a value from 0.0-1.0. to decrease the transparency (e.g. 0.2 is hazy, 0.5 makes half transparent).
Example of adding a background image with a specified opacity:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg" width="300" height="150" alt="w3docs">
</body>
</html>
In the example above, the image has 50% opacity.