1. css
  2. /properties
  3. /background-image

background-image

Definition

The background-image property in CSS sets an image as the background of an element. It can be used to specify a single image, a repeating image, or a gradient as the background.

Examples

Setting a single image as the background:

.single {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
}

Setting a repeating image as the background:

.repeating {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-repeat: repeat;
}

Setting a linear gradient as the background:

.linear {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to right, red, yellow);
}

Setting a radial gradient as the background:

.radial {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, blue, green);
}

Values

ValueDescription
noneNo image is used as the background. This is the default value.
<url>The background is an image specified by the URL of an image file.
linear-gradient(...)The background is a linear gradient. The gradient direction and colors are specified as arguments.
radial-gradient(...)The background is a radial gradient. The gradient shape and colors are specified as arguments.

Best Practices

  • Use background-image to specify an image, a repeating image, or a gradient as the background of an element.
  • The default value for background-image is none, which means that no image is used as the background.
  • Use a relative or absolute URL to specify the location of an image file as the value for background-image.
  • Use the background-repeat property to specify whether the background image should repeat or not.
  • Use the background-size property to specify the size of the background image.
  • Use the background-position property to specify the position of the background image.
  • Use the background-attachment property to specify whether the background image should be fixed or scroll with the rest of the page.
  • Use background-image in combination with other background properties, such as background-color, background-clip, and background-origin, to create more complex and customized backgrounds.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes