
The CSS background-image property settles one or more background images for an element.
Note: By default, a background-image is placed at the top-left corner of an element, and is repeated horizontally and vertically.
Syntax:
background-image: url|none;
none (default) – background image will not be displayed.
url – the URL to the image.
linear-gradient() – settles a linear gradient as the background image.
radial-gradient() – settles a radial gradient as the background image.
repeating-linear-gradient() – repeats a linear gradient.
repeating-radial-gradient() – repeats a radial gradient.
Example1:
Settles a background-image for the <body> element:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fec5bb;
background-image: url("https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640");
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
height: 200vh;
}
</style>
</head>
<body>
<h1 style="text-align:center;">The background Property</h1>
<h3 style="text-align:center;">Scroll down to see the effect</h3>
</body>
</html>
Output:
Example2:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640"), url("https://lenadesign.org/wp-content/uploads/2021/07/2a-1024x576.jpg");
background-repeat: no-repeat, repeat;
background-color: #edf2f4;
}
</style>
</head>
<body>
</body>
</html>
Output:
Settles two background images for the <body> element.
Example3:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient-1 {
position: relative;
height: 100px;
width: 200px;
background-image: linear-gradient(to right, yellow , green);
}
</style>
</head>
<body>
<div id="gradient-1"></div>
</body>
</html>
Output:
Settles a linear-gradient as a background image for a <div> element:
Enjoy coding!
Read also: