Несколько background с помощью CSS, или Multiple Backgrounds
Каждый верстальщик знает, что самый простой способ создания дизайна – лучшее, что может быть. Одним из простых и удобных техник является растягивание background на весь экран, с помощью нескольких строк css кода.
Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняясемантическую верстку.
В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе. Вот, как это смотрится в реалии:
CSS код для multiple backgrounds
Несколько background картинок реализуются с помощью нескольких значений css параметра background, которые разделены комой:
Я пытался сделать так же, с помощью краткого кода. К сожалению, не работает.
Плюс к этому, можно использовать другие свойства background (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Так же, как и в CSS градиентах.
Вот и все! Надеюсь вам понравилась эта техника создания нескольких background, без использования каких либо вспомогательных элементов. Чистый семантический код.
Если у вас остались вопросы, замечания или предложения по поводу данной техники создания multiple backgrounds – пишите в комментарии. Также, хотелось бы провести тест на кроссбраузерность. Просьба, всем кто будет использовать (использует) данную технику, написать в комментарии, как это работает в разных браузерах (которыми вы пользуетесь).
