Статьи

background-image (свойство CSS)

Описание

Это свойство устанавливает фоновое изображение элемента через указанный URI. Изображение помещается поверх background-colorbackground-color Когда вы устанавливаете фоновое изображение, также по возможности устанавливайте background-color

Фон элемента — это область, покрытая шириной и высотой этого элемента (независимо от того, заданы ли эти размеры явно, или содержание диктует их); это также включает область, покрытую отступами и границами. background-colorbackground-imagepaddingborder Эта зона покрытия очевидна, когда элемент имеет transparentdotteddashed Обратите внимание, что версии Internet Explorer вплоть до 6 включительно не поддерживают transparent

Некоторая область рассматриваемого элемента должна быть видимой, чтобы background-image Если элемент не имеет внутренней высоты (определяемой его содержимым или размерами), фон не будет иметь места для отображения. Если элемент содержит только всплывающие дочерние элементы, которые еще не были очищены (см. Очистить), фон снова не будет отображаться, поскольку высота элемента будет равна нулю.

По умолчанию background-image помещается в верхнем левом углу (background-position) элемента; он повторяется по осям xybackground-repeat Это настройки по умолчанию, которые применяются, если вы явно не задали другие, и их можно настроить с помощью других свойств фона. Обратитесь к другим соответствующим материалам ниже для методов, которые вы можете использовать для позиционирования и управления изображением.

пример

Это правило стиля назначает фон
изображение элемента с идентификатором "example"

 #example {
  background-image:
  ➥    url(images/bg.gif);
}

Значение

Значение URI указывает местоположение, в котором можно найти изображение.

Значение none гарантирует, что фоновое изображение не будет отображаться; это настройка по умолчанию, поэтому вам не нужно определять ее явно, если вы не хотите переопределять предыдущие объявления background-image

Значение наследовать заставило бы элемент наследовать background-image Такой подход обычно не применяется, поскольку унаследованное фоновое изображение элемента, скорее всего, будет перекрывать родительское изображение. В большинстве случаев фоновое изображение родителя будет видно через прозрачный фон элемента, если не было установлено другое background-imagebackground-color