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

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