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

/ 👁 3218

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

А именно, сегодня мы поговорим об одном из свойств 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 фоновых изображения для одного веб элемента

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

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

Надеюсь в этой статье Вы нашли для себя что-то полезное. О других, не менее интересных свойствах фоновых изображений мы поговорим с Вами в следующих статьях.

Оставляйте свои комментарии и делитесь статьей с друзьями в социальных сетях.

С Вами была Анна Котельникова.

До скорых встреч!

Tags:

Leave a Reply