Два фона у элемента на css

Комментарии: 0

Рассмотрим установку на элемент двух фоновых изображений CSS стилями. В примере возьмём заголовок «H1» и украсим его справа и слева декором.

HELLO WORLD

В html коде оборачиваем необходимы текст в «div» с классом «decor». Именно на этот класс и будем навешивать наши фоновые изображения.

<div class="decor">
    <h1>HELLO WORLD</h1>
</div>

В файле с CSS стилями добавляем указанный класс с описанием свойства «background».

.decor {
   background: url("heading-decor-r.gif")  right center no-repeat,
               url("heading-decor-l.gif")  left center no-repeat;
   margin: 0px;
   display: inline-block;
   padding: 0 35px;
}

.decor h1 {
    margin: 0px;
    color: #9E9C79;
    text-shadow: silver 0 0 2px;
}

Не забудьте прописать полные пути к изображениям.

Таким способом можно прикручивать изображения к различным элементам сайта. Выводить их относительно элемента можно по разному — например, сверху и снизу или только слева от элемента.

Конец