div style background image

Для любого элемента в документе можно установить фоновое изображение используя CSS свойство: background-image .

Возможные значения свойства background-image :

  • url — абсолютный или относитльный путь к файлу с изображением.
  • none — изображение отсутствует, это значение по умолчанию.

Если для элемента вместе с фоновым изображением задан цвет фона, он будет показываться до момента загрузки фонового изображения, также он будет показываться если файла изображения нет по указаному адресу, также он будет показываться если в фоновом изображении есть прозрачные области.

Если фоновое изображение не заполняет собой всё пространство элемента, то он выкладывается «плиткой».

Фиксация фонового изображения

Если документ образует в окне браузера полосу прокрутки, то есть документ не влазит в окно полностью, то фоновое изображение прокручивается вместе с содержимым страницы. Вот пример:

Фоновое изображение можно зафиксировать. Для этого в CSS применяется свойство background-attachment . По умолчанию его значение равно scroll (прокрутка или подвижный фон).

То есть прошлый пример полностью аналогичен следующему:

Чтобы зафиксировать фоновое изображение свойству background-attachment нужно назначить значение fixed . Исправим предыдущий пример и посмотрим как он будет работать:

Значения scroll и fixed для свойства background-attachment были в версии CSS2.1. В спецификации CSS3 появилось дополнительное значение для этого свойтва — local .

При использовании свойтва local , а применять его имеет смысл к блокам в документе, фоновое изображение блока будет прокручиваться, если блок имеет полосу прокрутки и пользователь прокручивает её. Тогда содержимое блока и фоновое изображение прокручиваются в блоке. При прокрутке страницы, а не блока, фоновое изображение блока прокручивается вместе с внеблоковым содержимым документа. Это проще один раз увидеть, чтобы понять. Вот пример:

Читайте также:  lg g4s h736 прошивка

На этом тема фиксации фоновых изображений в рамках этой статьи закрыта.

Повторение фонового изображения

Выше в статье писалось, фоновый рисунок повторяется «плиткой», если не занимает всей площади блока. Управлять вариантами повторений фонового изображения можно при помощи свойства background-repeat . Возможные значения этого свойства:

  • repeat — фоновый рисунок повторяется «плиткой» (значение по умолчанию).
  • no-repeat — фоновый рисунок не повторяется, показывается только один раз.
  • repeat-x — повторять изображение только по горизонтали.
  • repeat-y — повторять изображение только по вертикали.

Теперь тот же самый пример, только повторим изображение по вертикали.

Позиционирование фонового изображения

Изменить начально положение фонового изображения, заданного свойством background-image , можно при помощи свойства background-position . Если быть точным, задаётся позиция верхнего левого угла изображения.

Для позиционирования можно использовать следующие ключевые слова:

Позиционирование по горизонтали:

  • left — расположить слева.
  • center — расположить по центру.
  • right — расположить справа.

Позиционирование по вертикали:

  • top — расположить сверху.
  • center — расположить по центру.
  • bottom — расположить снизу.

Кроме ключевых слов можно использовать единицы измерения CSS такие как пикселы, проценты и прочие.

Свойство background

Свойство background является базовым и используя его можно задать значение всех дочерних свойств, описаных выше.

  • background-color — работа с этим свойством подробно описана в статье «Цвета в CSS»
  • background-attachment
  • background-image
  • background-position
  • background-repeat

При использовании свойства background параметры задаются через пробел в любом порядке, только параметры позиционирования при совпадии значений устанавливаются сначала для горизонтали, потом для вертикали.

CSS Internet Explorer Chrome Opera Safari Firefox Android iOS
2.1 6.0+ 9.0+ 1.0+ 3.5+ 1.0+ 1.0+ 2.1+ 1.0+
3 9.0+ 1.0+ 10.5+ 1.3+ 3.6+ 2.1+ 1.0+

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Процентная запись Неприменима
Ссылка на спецификацию
  • http://www.w3.org/TR/CSS21/colors.html#propdef-background-image
  • http://www.w3.org/TR/css3-background/#the-background-image
Читайте также:  asus m5a78l m lx3 разгон процессора

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.

Синтаксис

CSS2.1
CSS3

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementBy >elementID «).style.backgroundImage

Браузеры

Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные ( dashed или dotted ), а не сплошные.

Если для элемента значение overflow установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Если фон задаётся для строки таблицы (тег

), то Chrome, Safari, iOS отображают его не так, как предписывает спецификация, а именно для каждой ячейки отдельно. В то время как браузер должен показывать цельный фон для всего ряда. В примере 2 приведён код демонстрирующий ошибку.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).

Is it possible to make a

8 Answers 8

div style background image

You can do that using CSS’s background propieties. There are few ways to do it:

Читайте также:  di box на полевом транзисторе

By ID

HTML:

CSS:

By Class

HTML:

CSS:

In HTML (which is evil)

HTML:

Where:

  • color is color in hex or one from X11 Colors
  • path is path to the image
  • others like position, attachament

background CSS Property is a connection of all background-xxx propieties in that syntax:

background: background-color background-image background-repeat background-attachment background-position;

Оцените статью
Все о Windows 10
Добавить комментарий