Как сделать фон для сайта
Зачастую разработка дизайна сайта начинается с определения его фона и это на мой взгляд правильно. Ведь фон это редко меняемая часть сайта, которая будет видна всегда. Очевидно, что такая важная деталь должна быть в гармонии с цветовой палитрой всего сайта.
При создании фона для сайта самое главное определиться с вопросом о том, будет ли сайт растягиваться на весь экран (резиновый дизайн). Конечно, лучше сделать так, чтобы дизайн сайта и в далеком будущем на больших разрешениях мониторов отображался также красиво, но с другой стороны, чтобы при этом сайт не был сильно растянут. Лично я всегда выбираю такие шаблоны для сайта, чтобы ширина видимой части контента была не больше 1024 символов. Если посмотреть статистику сайта, то такое разрешение удовлетворяет больший процент пользователей. В будущем это число будет уменьшаться, т.к. новые мониторы с высоким разрешением вытесняют старые.
В качестве фона можно использовать либо монотонный цвет, либо фоновое изображение. У каждого способа есть свои плюсы и минусы. Монотонный цвет не будет нагружать сайт загрузкой лишнего изображения, но и дизайн сайта не будет столь эффектным, как это можно было бы сделать с применением фонового изображения.
Фон для сайта задается в теге body с помощью специальных атрибутов. Рассмотрим эти атрибуты:
1. background-color - задает цвет фона. Можно выбрать любой понравившийся цвет. Например:
|
background-color: #EAEDCC;
//можно писать названия цвета
background-color: red;
//есть и третий вариант
background-color: rgb(255,0,0);
|
Всю палитру цветов в кодах на html Вы сможете найти тут.
2. background-image - задает фоновое изображение. Например:
| background-image: img/superfon.gif |
После двоеточия указывается адрес изображения. Можно использовать как относительный так и прямой адрес.
Задавая в виде фона картинку, Вы можете настроить так же ряд важных параметров:
2.1. background-repeat - задает параметры для повторения фона. Может принимать следующие значения:
→ repeat-x (повторять по горизонтали),
→ repeat-y (повторять по вертикали),
→ no-repeat (не повторять),
→ repeat (повторять по горизонтали и вертикали).
По умолчанию включен просто repeat, т.е. повторять.
2.2. background-attachment - задание привязки. Может принимать два параметра:
→ scroll (действует по умолчанию) - фон прокручивается вместе с сайтом;
→ fixed - при прокрутке скролла фон остается неизменными.
Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.
2.3. background-position - задание расположение фона. Может принимать 5 параметров:
→ top,
→ left,
→ right,
→ bottom,
→ center.
Все эти параметры можно задать в таблице стилей CSS.
Напоследок запишем все атрибуты вместе:
|
...
<body style="background-image: url(fon.gif);
background-repeat: repeat-x;
background-position: top;">
...
|
Читайте также:
• Добавление счетчика посещений на сайт
• Как сделать выпадающие меню
• Как сделать favicon
• Как сделать красивую подсказку для ссылок
• Как увеличивать изображения (все способы)
• Коды символов для HTML
• Добавление социальных кнопок на сайт
← Перейти в каталог html уроков и советов
|
