# Свойство background-image

Свойство `background-image` задает фоновую картинку элементу. По умолчанию картинка замостит своими копиями весь блок, однако, это поведение можно отменить с помощью свойства `background-repeat`.

## Синтаксис

`селектор { background-image: url(путь к картинке); }`
`селектор { background-image: none; }`

## Значения

Значение | Описание
--- | ---
`url` | Путь к файлу с картинкой. Название картинки может быть в двойных кавычках, одинарных и вообще без кавычек.
`none` | Отменяет фоновую картинку для элемента.

Значение по умолчанию: `none`.

## Пример

Зададим фоновую картинку с помощью `background-image`, запретив ее повторение с помощью свойства `background-repeat`:

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

:

## Пример

Без `background-repeat` фоновая картинка замостит собой весь блок:

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

:

## Пример

Можно одновременно задавать фоновую картинку и задавать фоновый цвет с помощью `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; }`

:

## Смотрите также

- свойство `background`,
  представляющее собой свойство-сокращение для фона

← →
↑
en ru