CSS background-image Property

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!

Share this: