Среда, 13.11.2019, 23:41
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 Как сделать фон для сайта

Как сделать фон для сайта

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

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

 

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz