Секреты применения фоновых изображений для уникального веб дизайна

Применение фоновых изображений может заставить Ваш сайт выгодно выделяться среди прочих. Они могут сделать веб страницу уникальной в плане дизайна и привлечь на нее больше посетителей. О секретах применения фоновых изображений мы и поговорим в этой статье.

А именно, сегодня мы поговорим об одном из свойств 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 мы получим то же, что имеем и сейчас. А три остальные значения дадут следующие результаты:
фоновое изображение для веб страницы не повторяющееся
фоновое изображение для веб страницы повтор по горизонтали
фоновое изображение для веб страницы повтор по вертикали
Давайте теперь поговорим о позиционировании фонового изображения. Если наш фон не занимает весь элемент, т.е. не повторяется, то мы можем регулировать его местоположение. Делается это при помощи свойства background-position. Регулировать местоположение можно тремя способами: используя точные значения, ключевые слова и процентные соотношения. Давайте разберем все по порядку.
Я создам внутри нашего дива простой список с маркерами.

<ul> <li>Повторение</li> <li>Позиционирование</li> <li>Фиксация</li> </ul>

При помощи стилей мы можем убрать маркеры-точки и поставить вместо них картинку, которую сами выберем. Я нашла такую картинку - это картинка пера, мы можем поставить ее вместо маркера и при помощи 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 фоновых изображения для одного веб элемента
И напоследок давайте добавим еще одно фоновое изображение для нашего дива, но его позиционирование укажем при помощи процентов. Здесь указывается 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; }

А выглядеть это все будет вот так:
3 фоновых изображения для одного веб элемента
На этом сегодня все. Теперь Вы знаете, как можно применить несколько фоновых изображений к любому элементу веб страницы, как их правильно позиционировать, тем самым создавая уникальные дизайны, используя минимум кода.
Надеюсь в этой статье Вы нашли для себя что-то полезное. О других, не менее интересных свойствах фоновых изображений мы поговорим с Вами в следующих статьях.
Оставляйте свои комментарии и делитесь статьей с друзьями в социальных сетях.
С Вами была Анна Котельникова.
До скорых встреч!

Установи кнопку «Сколько дней твоему блогу»

Сайт в стиле Параллакс Скроллинг (Parallax Scrolling)

Как подключить любые шрифты для сайта

Понравилась статья? Поделись с друзьями!


Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: