Применение фоновых изображений может заставить Ваш сайт выгодно выделяться среди прочих. Они могут сделать веб страницу уникальной в плане дизайна и привлечь на нее больше посетителей. О секретах применения фоновых изображений мы и поговорим в этой статье.
А именно, сегодня мы поговорим об одном из свойств CSS, которое носит имя background-image, а также рассмотрим некоторые приемы, которые позволят с легкостью применять его для создания уникальных веб страниц.
Свойство background-image добавляет фоновое изображение в качестве фона элемента.
Его синтаксис достаточно прост. Давайте рассмотрим все это на простом примере. Создадим простой html файл, в котором между тегами боди разместим изначально только лишь один div. Сразу подключим к нашему файлу таблицу стилей, которую тоже создадим и сохраним в том же каталоге, что и основной файл.
Итак, html файл будет содержать следующий код:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Бэкгрануд - Фоновое изображение</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div> </div> </body> </html>
Давайте зададим в таблице стилей для начала высоту, ширину, рамку и выравнивание по центру для нашего дива.
div{width:860px;
margin: 0 auto;
height: 600px;
border:1px solid #ccc;
}
Теперь попробуем для нашего дива задать фоновое изображение. Для начала его нужно откуда-то скачать. Я Вам советую использовать, так называемые, бесшовные изображения. Их особенность в том, что при повторе у них не видно стыков, то есть даже при повторе, изображение будет смотреться как единая картинка, а подгружаться за счет своего небольшого размера будет гораздо быстрее. Одно из таких изображений я и скачала и разместила его в папке image, в том же каталоге, что и файл таблицы стилей и html файл.
Чтобы добавить фоновое изображение нашему элементу див, нужно всего лишь приписать следующую строчку к его стилям.
background-image:url(image/bg1.jpg);
В итоге получим следующий результат.
Как Вы видите, изображение замостило всю область нашего элемента и мы не видим никаких швов.
А что делать, если мы не хотим, чтобы наше изображение повторялось и занимало всю область элемента?
Для этого мы можем добавить свойство backgound-repeat, которое может принять одно из четырех значений: no-repeat, repeat, repeat-x, repeat-y соответственно: не повторять, повторять, повторить по горизонтали, повторить по вертикали.
Прописывая repeat мы получим то же, что имеем и сейчас. А три остальные значения дадут следующие результаты:
<ul> <li>Повторение</li> <li>Позиционирование</li> <li>Фиксация</li> </ul>
Давайте теперь поговорим о позиционировании фонового изображения.
Если наш фон не занимает весь элемент, т.е. не повторяется, то мы можем регулировать его местоположение. Делается это при помощи свойства background-position. Регулировать местоположение можно тремя способами: используя точные значения, ключевые слова и процентные соотношения.
Давайте разберем все по порядку.
Я создам внутри нашего дива простой список с маркерами.
При помощи стилей мы можем убрать маркеры-точки и поставить вместо них картинку, которую сами выберем. Я нашла такую картинку – это картинка пера, мы можем поставить ее вместо маркера и при помощи background-position отрегулировать ее позицию именно так, как нам нужно. Здесь следует учесть размер самой картинки, чтобы сделать необходимые отступы (иначе она может просто не влезть в тег li). Также обязательно нужно указать, что наша картинка не должна повторяться.
Само же задание точных значений для позиции фоновой картинки не представляет собой ничего сложного. Здесь у нас будет 2 значения: первое – это отступ от левого края элемента вправо, второе – отступ от верха вниз. Следует также отметить, что значения могут быть и отрицательными, тогда отступы будут влево и вверх соответственно.
Если мы зададим следующие стили:
ul{margin:200px 50px 50px 70px;
width:400px; font-size:16px;
font-family:"Arial Black"}
li{list-style-type: none;
padding-left:40px;
padding-top:20px;
padding-bottom:10px;
background-image:url(image/pero.png);
background-repeat: no-repeat;
background-position:0 9px;
}
то результат будет вот таким:
Позиционировать фоновую картинку можно также и при помощи ключевых слов. Для горизонтального позиционирования: left, center, right. Для вертикального: top, center, bottom.
Давайте попробуем задать еще одно фоновое изображение для нашего дива, но только сделаем его не повторяющимся и расположим вверху справа.
Да, да, мы можем задать несколько фоновых изображений для одного и того же элемента веб страницы. Здесь нет ничего сложного, нужно лишь указать их через запятую. Также через запятую нужно будет указать их значения для background-repeat и для background-position.
О чем здесь стоит помнить?
Во-первых, нужно помнить, что если мы указываем два или более фоновых изображения, то одно всегда будет располагаться поверх другого.
Следовательно первым нужно указывать то фоновое изображение, которое должно быть вверху.
Во-вторых, значения для background-repeat и для background-position нужно указывать точно в той последовательности, в которой мы указали и сами фоновые картинки.
Помните эти 2 простых правила и тогда все получится на ура!
Теперь давайте добавим в правый верхний угол нашего дива еще одно фоновое изображение. При этом наш код таблицы стилей для дива поменяется следующим образом:
div{width:860px;
margin: 0 auto;
height: 600px;
border:1px solid #ccc;
background-image:url(image/tinta.png),url(image/bg1.jpg);
background-repeat:no-repeat,repeat;
background-position:right top, left top;
}
А результат будет вот таким:
И напоследок давайте добавим еще одно фоновое изображение для нашего дива, но его позиционирование укажем при помощи процентов. Здесь указывается 2 процентных значения: одно для горизонтальной координаты (от левого края), другое для вертикальной (от верхнего). Итак, если мы хотим разместить еще одно фоновое изображение в нашем диве в нижнем правом углу, то наш код таблицы стилей для дива может измениться примерно так:
div{width:860px;
margin: 0 auto;
height: 600px;
border:1px solid #ccc;
background-image:url(image/stamp.png),url(image/tinta.png),url(image/bg1.jpg);
background-repeat:no-repeat,no-repeat,repeat;
background-position:90% 95%,right top, left top;
}
А выглядеть это все будет вот так:
На этом сегодня все. Теперь Вы знаете, как можно применить несколько фоновых изображений к любому элементу веб страницы, как их правильно позиционировать, тем самым создавая уникальные дизайны, используя минимум кода.
Надеюсь в этой статье Вы нашли для себя что-то полезное. О других, не менее интересных свойствах фоновых изображений мы поговорим с Вами в следующих статьях.
Оставляйте свои комментарии и делитесь статьей с друзьями в социальных сетях.
С Вами была Анна Котельникова.
До скорых встреч!
