The background-image property

The background-image property sets a background image of an element. By default, the image will cover the entire block with its copies, however, this behavior can be canceled using the background-repeat property.

Syntax

cssselector {
  background-image: url(path to an image);
}

cssselector {
  background-image: none;
}

Values

Default value: none.

Example

Let's set a background image using background-image, disabling its repetition using the background-repeat property:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Example

Without background-repeat a background image will cover the entire block:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Example

You can simultaneously set a background image and set a background color using background-color. In this case, where there is no background image, there will be a background color:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

See also