
Все о фоне сайта – сделайте свой сайт красивым и уникальным!
Фон для сайта – довольно важный элемент любого дизайна. Особенно это замечают те люди, у которых большое разрешение монитора, ведь если в среднем ширина любого блога порядка 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;
Существует множество вариантов того, как сделать красивый фон на сайте, либо его изменить. В этой статье мы рассмотрели самые простые примеры, которые Вы можете применить уже сейчас и установить нужный цвет или фоновое изображение для своего сайта.
Похожие статьи:
-
Владимир Жданов | 05.02.2013 в 17:19
Гуд! Отличная статья. Все подробно и понятно расписал. Можно еще комбинировать сразу несколько фоновых картинок, перечисляя их через запятую, но об этом в другой статье (с)
Я попробовал сейчас на какже сделать отступ в 10px, как-то не понравилось. в 90 круче )
-
Катерина Брынина | 05.02.2013 в 17:38
Спасибо за статью. Добавила в закладки. Обязательно поэкспериментирую на досуге.
-
Виталий | 05.02.2013 в 21:14
Мне кажется, что лучше использовать относительный путь до картинки в этом случае если вдруг вы захотите поставить этот же шаблон на другой блог не нужно будет менять путь до картинки.
-
Виталий | 05.02.2013 в 21:25
Еще один вопросик есть, правда немного не по теме, но очень хочется разобраться. Я заметил, что ваши сайты имеют ширину больше 1000 px . Но в основном все верстают шаблоны не больше 980 px.Насколько я знаю это делается для того чтобы при разрешении монитора 1024 px не было полосы прокрутки внизу экрана (окно браузера+скрол = 1024px). Почему вы используете больше чем 980 px? Может я чего-то не понимаю, вопрос без подвоха, просто я интересуюсь версткой и мне интересно.
-
Виталий | 05.02.2013 в 21:43
Ясно, спасибо
-
Елена | 05.02.2013 в 23:16
Здравствуйте, Антон!
Скажите пожалуйста, у меня после установления строчки NOLIX что-то нарушилось. И теперь не могу восстановить фон. Попробовала вставить бесшовный фон, ничего не получается. Фон на сайте просто белый.
{
margin: 0 auto;
padding: 0;
background:#c9ccff;
}#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0;
}
СПАСИБО
-
Василий | 06.02.2013 в 9:29
Спасибо за такой простой и понятный мануал. Новичкам в самый раз. На многих тренингах по созданию сайтов сегодня этому не учат.
-
дед Виталя | 06.02.2013 в 14:48
Статья и для меня очень кстати. В новый блог – новый фон!
Я потихоньку экспериментирую, но всё делаю методом “тыка”.
А сейчас попробую “по науке”.
Спасибо, Антон!
Немного оффтоп. Как будет у тебя свободная минутка (можно на “ты”, взаимно? В инете так проще, и деду приятнее ;)), взгляни на фон в другом моём блоге (урл комментария) Не слишком ли ярко в сочетании с иллюстрациями в постах?
-
дед Виталя | 06.02.2013 в 19:51
Понял, спасибо большое, Антон. Мне тоже повторы не особо нравятся. Но пока не нашёл лучший для себя вариант. А вот переход в обычный цвет – это мысль.
Попробую поэкспериментировать во всех своих 3-х блогах
-
Наталия Хоробрых | 07.02.2013 в 15:12
Очень ценная статья. В двух своих блогах сейчас как раз думаю о фоне. Вот только с кодами не люблю возиться…
-
allemiko | 23.02.2013 в 21:58
Да нужно уже менять фон, надоедает, пора сменить на что то светлое, специальных дыр что ли сделать
Постоянно думаю над фоном.
-
allemiko | 24.02.2013 в 8:56
Да я заметил
Часто видел такие фоны на торрент пораталах или сайтов с фильмами, привлекает вот что: это выглядит не очень рекламно,так как это второстепенный фон, и еще красиво, если хорошо подобрать брендо фон к сайту.
Подскажите не будущее, поставить фон то я могу, а вот сделать отступ сверх не имею понятия, Нужно наверное добавить еще один блог сверх в теге див?
-
allemiko | 24.02.2013 в 14:16
Cпасибо
Cорри не заметил. :
-
Елена Олейникова | 26.04.2013 в 15:38
Я смотрю, ваш kakje.ru сейчас совсем по-другому выглядит. Причем весь блок (Психология и т.д.) съехал вправо. Это очередной эксперимент или вы будете делать полноценный блог?
-
Елена Олейникова | 27.04.2013 в 1:37
Ну где же один в один? Я вижу ваш kakje.ru так: http://clck.ru/8cpqc
По-моему, разница есть.
-
Елена Олейникова | 28.04.2013 в 1:10
Значит, не зря говорят – проверяйте свой блог во всех браузерах. Проверить-то не проблема, у меня их куча установлена, а вот как исправить косяк? Вы как с проблемой будете справляться?
-
Елена Олейникова | 28.04.2013 в 5:32
Вот это ваше – “даже в ИЕ” – классная характеристика браузера
Я из-за него свой сайт на Джумле собственными руками придушила! Была еще начинающая, глупая, многого не знала. Но по курсу Попова все же сайт смогла сделать.
Вот он везде просто отлично смотрелся, а на ИЕ ТАКАЯЯЯЯ фигня была. Расстроилась, решила, коль руки кривые и…
Нет сайта, нет проблем.
Иногда гляну на скриншот того своего сайта и так жалко
-
Nataliya | 07.05.2013 в 23:40
Как сделать прозрачной шапку, я делаю сайт с помощью Dreamweaver.
-
Юлия | 01.11.2013 в 17:01
Здравствуйте. Подскажите как сделать продолжение каринки в футере пример(isif-life[точка]ru) и спозиционировать отдельные элементы по краям фона например(gavrilov.enterbook[точка]rU). А то шапку поменяла на своём сайте, а как по бокам доделать не знаю.
-
Константин | 02.04.2014 в 22:28
Не знаю было или нет, но с моей точки зрения лучше заливать фоновую картинку в папку с шаблоном, в директорию, например, image/, чем в upload. А вообще сам предпочитаю использовать именно заливку цветом, просто, выполняет задачу и не грузит сайт. Для меня фон это возможность, условно говоря, затенить не нужное на сайте, те же пустоты, и сфокусировать внимание читателя на главном.
-
Александр | 01.03.2016 в 16:28
Описано все подробно, спасибо. Но на моем сайте http://decoacoustic.ru/ не получилось. Все меню почему то другие. Что не так делаю? Подскажите, я новичок.
А я бы отступ хедера от верха экрана на kakje.ru сделал бы поменьше… _http://s41.radikal.ru/i094/1302/d6/daf0be0e160d.jpg
как то некошерно смотрицца… но на вкус и цвет