Общее свойство фона: background

background

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Версии браузеров 1.0 3.6 9.0 10.5 1.3
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.1 1.0 10.0 5.0 3.2
Свойство
background — это общее свойство для фона
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
background-color | background-image | background-repeat | background-position | background-attachment | background-clip | background-size | background-origin
Значение по умолчанию
У каждого перечисляемого свойства свое значение
Правила записи
свойство: перечисление значений свойств;

  • Свойства перечисляются через пробел
  • Порядок следования свойств не важен
  • Колличество указываемых свойств не имеет ограничения, можно указать даже значение одного свойства
  • Для пропущенных значений будет автоматически указано значение по умолчанию
  • Свойство background-size указывается после свойства background-position через слэш, отдельно свойство background-size указывать нельзя, только совместно со свойством background-position
  • Если для элемента указываются значения свойств background-clip и background-origin, то значение свойства background-clip нужно указывать последним

Также существует возможность указывать не одно фоновое изображение а несколько, тогда запись примет вид:

свойство: значение1, значение2, …, значениеn;

  • Значения перечисляются через запятую
  • Если накладывать фоновые изображения друг на друга то самое последнее изображение будет находиться на заднем плане, а каждое предыдущее будет накладываться поверх него, таким образом самое первое указанное изображение будет находиться на переднем плане
  • Колличество изображений не ограничено
Примеры

Это правило применит фоновый рисунок figure.png, изображение не будет повторяться, цвет фона будет mistyrose, изображение будет выставлено в позицию left bottom, размер изображения будет 85px на 95px, фоновое изображение позиционируется у края границы отступа, а фон заполнит блок полностью вместе с границей

<blockquote>

Вам знакомо выражение: «Выше головы не прыгнешь»? Это заблуждение. Человек может все.

Никола Тесла

</blockquote>

<div>

Это правило применит только цвет фона bisque

</div>

<p>

К этому абзацу будут применены два изображения, одно изкоторых будет располагаться в правом верхнем углу, а другое, в левом нижнем углу

</p>

Поделиться