В этом уроке мне хотелось бы подробно рассказать все возможности и особенности работы с фоном на сайте, свойства background и как их использовать для придания вашему сайту качественного и неповторимого дизайна.
Для начала давайте разберем, как задается фон и с помощью чего это делается. Любому элементу html страницы можно задать фон с помощью атрибута background, хоть таблице, хоть обычному боксу div или всей странице в целом. Давайте разберем стандартную модель формирования фона на сайте.
Обычный цветной фон делается очень просто с помощью атрибута background-color вы задаете цвет по его названию например red, white… или в системе RGB т.е. #ff0000, #ffffff
Пример:
<html>
<body style="background-color: #ff0000;">
</body>
</html>
И фон у станицы становится красным… Если нам необходимо сделать картинку фоном мы используем атрибут background и прописываем путь к картинке, например просто повторяющаяся картинка:
<html>
<body style="background: url(bg.png);">
</body>
</html>
И вот что мы получим:
Теперь давайте усложнять наши задачи при помощи параметра repeat с английского повтор, а именно зададим повторение рисунка только по горизонтали:
<html>
<body style="background: url(bg.png) repeat-x;">
</body>
</html>
И получим:
Как видите фоновый рисунок повторяется только по горизонтали, сделаем то же самое только по вертикали:
<html>
<body style="background: url(bg.png) repeat-y;">
</body>
</html>
И результат:
Можно сделать, чтобы рисунок вообще не повторялся для этого надо прописать no-repeat, и все. Как вы поняли по умолчанию браузер размножает изображение таким образом чтобы заполнить все видимое пространство.
Идем дальше есть ещё один очень интересный атрибут, который называется scroll этот атрибут определяет подвижность фона, то есть если у вас очень длинная страница но вы не хотите чтобы фон перемещался вместе с прокручиванием колесика мышки задаете параметр scroll: fixed; , а если наоборот то оставляете параметры по умолчанию.
Переходим к следующему свойству которое как и первое мне хотелось бы разобрать подробнее так как оно очень часто применяется и очень важно. Речь идет о позиционировании фона, эта функция осуществляется с помощью атрибута background-position, которая определяет местоположение картинки в окне браузера. Существуют несколько значений данного атрибута которые я продемонстрирую на примере блоков, исключительно для удобства восприятия и понятия.
Код:
<html>
<body>
<div style="width:600px; height: 100px; border: 1 solid #000; background: url(bg.png) no-repeat; background-position: top;">top</div>
<div style="width:600px; height: 100px; border: 1 solid #000; background: url(bg.png) no-repeat; background-position: middle;">middle</div>
<div style="width:600px; height: 100px; border: 1 solid #000; background: url(bg.png) no-repeat; background-position: bottom;">bottom</div>
<div style="width:600px; height: 100px; border: 1 solid #000; background: url(bg.png) no-repeat; background-position: left;">left</div>
<div style="width:600px; height: 100px; border: 1 solid #000; background: url(bg.png) no-repeat; background-position: center;">center</div>
<div style="width:600px; height: 100px; border: 1 solid #000; background: url(bg.png) no-repeat; background-position: right;">right</div>
</body>
</html>
Результат:
Давайте разберемся с кодом и что у нас получилось. Я создал для каждого значения блок размером 600 пикселе на 100 и сделал обводку, и в каждый бокс я поместил фоновый рисунок, который естественно не должен повторятся чтобы мы могли его позиционировать и собственно результат работы каждого значения вы видите наглядно на картинке.
Но и это не все возможности позиционирования фонового рисунка, вы так же можете вместо значений, задавать координаты отступа от краев в пикселях или процентах:
<html>
<body>
<div style="width:600px; height: 200px; border: 1 solid #000; background: url(bg.png) no-repeat; background-position: 20px 40px;">
Отступ слева 20 пикселей, отступ от верха 40
</div>
<div style="width:600px; height: 200px; border: 1 solid #000; background: url(bg.png) no-repeat; background-position: 30% 40%;">
Отступ слева 30 % от ширины, отступ от верха 40% высоты
</div>
</body>
</html>
И вот что получается:
Как вы могли заметить первый отступ идет от левого края, а второй от верха, очень удобно в плане верстки, очень сильно расширяет ваши возможности. В принципе ничего сложного, но незнание этих моментов очень сильно стеснит вас разработке сайтов.
На этом все, надеюсь этот урок будет вам полезен и вы почерпнете из него много полезного и нужного.
Дата публикации:2012-03-15
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.
