RealAdmin.ru

Пример фонового изображения у элемента на CSS

Веб-дизайн,CSS,HTML
Категория: Сайтострой
05 Сен 2013 г. в 17:29

Рассмотрим установку на элемент двух фоновых изображений 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;
}

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

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

Конец
Посмотрите похожее — 6
Комментарии — 0
    © REALADMIN.RU   2017 г.
    Страница сгенерирована: 0,1492 s | 10 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top