Все о фоне сайта – сделайте свой сайт красивым и уникальным!
Фон для сайта – довольно важный элемент любого дизайна. Особенно это замечают те люди, у которых большое разрешение монитора, ведь если в среднем ширина любого блога порядка 1000 пикселей, то при разрешении экрана 1920×1080 – 920 пикселей будет занимать задний фон сайта – по 460 пикселей с одной и с другой стороны, довольно большое пространство, и над ним стоит поработать!
Задний фон сайта с одной стороны должен быть красивый, но в тоже время он не должен отвлекать посетителей от основного контента. Можно кратко сформулировать его назначение:
- Фон сайта должен дополнять блог визуально и создавать привлекательную атмосферу для чтения.
В этой статье мы рассмотрим три вида фоновых вариаций, которые Вы можете применить на своем блоге, пошагово повторив все действия за мной.
Итак, три вида фона сайта:
- Обычный цвет. Чаще всего используется белый (#fff), либо тот, который лучше подойдет и дополнит цветовую схему блога.
- Небольшая картинка, которая дает бесшовный фон. Здесь для фона используется картинка небольшого разрешения, которая повторяется по всей “фоновой” ширине и высоте. Но изображение должно быть не совсем обычное – любое не подойдет, так как мы будем достигать бесшовного эффекта – об этом ниже.
- Большая картинка + фоновый цвет. Эффектный прием, который выделит Ваш блог из многих и при грамотном подборе изображения произведет приятное впечатление на посетителя и обязательно задержит его на сайте.
Для того чтобы поставить или поменять фон на сайте нам потребуется отредактировать файл стилей style.css. Применять различные виды фона я буду на сайте http://kakje.ru/ на котором установлен WordPress и пошагово описывать свои действия.
Прежде всего нам нужно найти этот файл. Для этого заходим в админку, наводим на вкладку “Внешний вид” и нажимаем “Редактор”:
- Убеждаемся что для редактирования открыт файл style.css взглянув на правый нижний угол страницы.
- Находим стили для общего блока страницы: слово body.
На этом подготовительная работа закончена. Пора приступать к делу!
Как изменить фоновый цвет сайта.
Сложность: Легкая.
Изначально сайт выглядит вот так:
- При отсутствии прописанного стиля background – фон по умолчанию белый;
- Если у Вас уже прописан background, то просто замените его (удалите и пропишите заново). Предварительно скопируйте его в блокнот!
Теперь давайте попробуем изменить фоновый цвет. Для этого дописываем с стилях body вот эту строчку с кодом цвета:
background:#c9ccff;
Дополнительная картинка, чтобы не возникло трудностей:
И теперь наш сайт выглядит вот так:
Цвет фона может быть абсолютно любым, для этого просто узнайте нужный код цвета и замените его.
Картинка для фона сайта – бесшовный фон.
Сложность: Средняя.
Пример бесшовного фона сайта Вы можете посмотреть на этом блоге. Для фона используется вот такая картинка, которая повторяется по осям X и Y:
Принцип картинки для такого фона: если к ней вплотную подставить справа и снизу такую же, то будет осуществлен плавный переход (без шва):
Найдите подобную картинку в интернете – их очень много, либо нарисуйте ее сами используя этот принцип.
Чтобы использовать картинку в качестве фона первое что нужно сделать – это закачать ее на свой хостинг – обязательно! и узнать путь до нее, а затем прописать в стилях body эту строчку (со своим путем до картинки!):
background:url("http://путь_до_картинки");
Дополнительное пояснение:
И теперь наш сайт выглядит вот так:
Красивый фон для сайта – большая картинка + фоновый цвет.
Сложность: Средняя.
В этом случае мы используем в качестве фона (background) одну большую картинку, которая не повторяется и находится всегда сверху и по центру на сайте + подходящий фоновый цвет. Немного порыскав по интернету я нашел отличную картинку, которая бы идеально подошла для фона кулинарного блога, вот ее уменьшенная копия:
Обратите внимание на то, что данная картинка плавно перетекает слева, справа и снизу в однотонный цвет. Через фотошоп я посмотрел, что код этого цвета: #e7daae – его то и будем применять как основной в том месте, где заканчивается картинка.
После нескольких вариаций я получил вот такой фон:
Для такого отображения я дописал в файл style.css следующие строки:
background:url("http://путь_до_картинки") no-repeat center top #e7daae;
Существует множество вариантов того, как сделать красивый фон на сайте, либо его изменить. В этой статье мы рассмотрели самые простые примеры, которые Вы можете применить уже сейчас и установить нужный цвет или фоновое изображение для своего сайта.
