# 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

`selector { background-image: url(path to an image); }`
`selector { background-image: none; }`

## Values

Value | Description
--- | ---
`url` | Path to the file with an image. The name of the image can be in double quotes, single quotes or without quotes at all.
`none` | Desables a background image for an element.

Default value: `none`.

## Example

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

`<div id="elem"></div>` `#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:

`<div id="elem"></div>` `#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:

`<div id="elem"></div>` `#elem { background-color: orange; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 3px solid black; }`

:

## See also

- the `background` property
  that is a shorthand property for a background

← →
↑
en ru