CSS background-image Property

CSS background-image property sets an image as the element’s background.

In the example below, the <body> element uses the ‘sand.jpg’ image as its background. Try out the below example to see how it works:

Example:

body{
  background-image: url('images/sand.jpg');
}

It is also possible to set multiple images as element’s background. Image URLs must be separated by a comma.

See the example below:

Example:

body{
  background-image: url('images/golden-star.png'),
                    url('images/sand.jpg');
}

Important Points

You should always keep the below points in mind while applying the background-image property:

  • The background of an element is the total size of the element including the padding and border but excluding the margin. Therefore, by default, the background image covers the whole background area of the element.
  • By default, the background image is placed at the top left corner of the element. If it is smaller than the size of the element, it will repeat itself horizontally and vertically to cover the entire background.
  • If the image source(URL) is not found, the browser automatically sets the background-image property to none.
  • CSS gradients can also be used as the background image.

CSS Syntax

The background-image property has the following syntax:

background-image: none|url|gradient|initial|inherit;

Property Values

The background-image property accepts the following values:

noneSpecifies no background image. This is the default value.
url(source)Specifies the url/source of the image that is to be set as the background image. Multiple URLs must be separated by a comma.
linear-gradient()Sets the specified linear gradient as the background image.
radial-gradient()Sets the specified radial gradient as the background image.
repeating-linear-gradient()Sets the repeating linear gradient as the background image.
repeating-radial-gradient()Sets the repeating radial gradient as the background image.
initialSets the background-image property to its default value.
inheritInherits the background-image property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.backgroundImage = “images/sand.jpg”

More Examples

Set a linear gradient as background image.

Example:

div{
   background-image: linear-gradient(red, yellow);
   height: 200px;
}   

Set a repeating linear gradient as background image.

Example:

div{
  background-image: repeating-linear-gradient(red, yellow 20%);
  height: 200px;
}   

Set a radial gradient as background image.

Example:

div{
   background-image: radial-gradient(red, yellow);
   height: 200px;
   width: 200px;
   border-radius: 50%;
}

Set a repeating radial gradient as background image.

Example:

div{
   background-image: repeating-radial-gradient(red, yellow 20%);
   height: 200px;
   width: 200px;
   border-radius: 50%;
}

Related Pages

CSS Tutorial: CSS Background

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment