Как поставить фон на сайт?

3 ноября 2014 г. Просмотров: 707
Рабочий фон для сайта можно сравнить с обоями для рабочего стола вашей операционной системы. Фон (background), можно создать в нескольких вариациях, которые будут рассмотрены ниже.

Вам понадобится

  • Редактирование файла style.css.

Инструкция

  • Одноцветный фон. Самый простой вид фона, большим плюсом является минимальная загрузка страниц с использованием такого рисунка. Если в файле со стилями (style.css) нет команд, которые задают цвет фона, по умолчанию браузер предлагает белый цвет. Для изменения цвета воспользуйтесь командой background-color. Пример использования этой команды: background-color: #3366CC.
  • Чтобы подобрать конкретный цвет можно воспользоваться специальным программным обеспечением, например, графическим редактором Adobe Photoshop. Если вы никогда не работали с ним, рекомендуется использовать веб-сервисы. Ярким примером может послужить поисковая система «Яндекс», перейдите по следующей ссылке http://yandex.ru и введите словосочетание «цвет синий». Перед вами появится таблица цветов, в которой вы можете выбрать любой по своему вкусу, скопировать код и вставить в код сайта.
  • Фоновая текстура. Помимо фонового цвета вы можете добавить на любую страницу своего сайта изображение или циклично повторяющийся узор (текстуру). Для этого после ввода фонового цвета пропишите команду background-image, например, background-image: url(img/uzor.png). Внутри скобок необходимо указать путь до файла. Стоит отметить, что разрешение текстуры может начинаться от самого малого (16х16) и заканчиваться полноформатными изображениями под размер страниц сайта (800х600 и более).
  • Фон с использованием градиента. В этом случае вы используете цвет фона, который был задан командой background-color, но при этом создаете градиент. Градиент может быть горизонтальным (x) и вертикальным (y). Чаще всего в качестве градиента фона используют горизонтальное расположение, поэтому строка с градиентом будет выглядеть следующим образом: background-repeat: repeat-x.
  • Оцените статью!