Главная » Сервисы » Как добавить сайт в DMOZ, регистрация в каталоге ДМОЗ

Все о фоне сайта – сделайте свой сайт красивым и уникальным!

Фон для сайта – довольно важный элемент любого дизайна. Особенно это замечают те люди, у которых большое разрешение монитора, ведь если в среднем ширина любого блога порядка 1000 пикселей, то при разрешении экрана 1920×1080 – 920 пикселей будет занимать задний фон сайта – по 460 пикселей с одной и с другой стороны, довольно большое пространство, и над ним стоит поработать!Фон для сайта

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

  • Фон сайта должен дополнять блог визуально и создавать привлекательную атмосферу для чтения.

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

Итак, три вида фона сайта:

  1. Обычный цвет. Чаще всего используется белый (#fff), либо тот, который лучше подойдет и дополнит цветовую схему блога.
  2. Небольшая картинка, которая дает бесшовный фон. Здесь для фона используется картинка небольшого разрешения, которая повторяется по всей “фоновой” ширине и высоте. Но изображение должно быть не совсем обычное – любое не подойдет, так как мы будем достигать бесшовного эффекта – об этом ниже.
  3. Большая картинка + фоновый цвет. Эффектный прием, который выделит Ваш блог из многих и при грамотном подборе изображения произведет приятное впечатление на посетителя и обязательно задержит его на сайте.

Для того чтобы поставить или поменять фон на сайте нам потребуется отредактировать файл стилей style.css. Применять различные виды фона я буду на сайте http://kakje.ru/ на котором установлен WordPress и пошагово описывать свои действия.

Прежде всего нам нужно найти этот файл. Для этого заходим в админку, наводим на вкладку “Внешний вид” и нажимаем “Редактор”:Редактор файлов

  1. Убеждаемся что для редактирования открыт файл style.css взглянув на правый нижний угол страницы.
  2. Находим стили для общего блока страницы: слово body.

Файл стилей и фон

На этом подготовительная работа закончена. Пора приступать к делу!

Как изменить фоновый цвет сайта.

Сложность: Легкая.

Изначально сайт выглядит вот так:белый фон для сайта

  • При отсутствии прописанного стиля background – фон по умолчанию белый;
  • Если у Вас уже прописан background, то просто замените его (удалите и пропишите заново). Предварительно скопируйте его в блокнот!

Теперь давайте попробуем изменить фоновый цвет. Для этого дописываем с стилях body вот эту строчку с кодом цвета:

background:#c9ccff;

Дополнительная картинка, чтобы не возникло трудностей:Изменяем фоновый цвет

И теперь наш сайт выглядит вот так:Барвинковый фон

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

Картинка для фона сайта – бесшовный фон.

Сложность: Средняя.

Пример бесшовного фона сайта Вы можете посмотреть на этом блоге. Для фона используется вот такая картинка, которая повторяется по осям X и Y:Картинка для бесшовного фона

Принцип картинки для такого фона: если к ней вплотную подставить справа и снизу такую же, то будет осуществлен плавный переход (без шва):Бесшовный фон для сайта

Найдите подобную картинку в интернете – их очень много, либо нарисуйте ее сами используя этот принцип.

Чтобы использовать картинку в качестве фона первое что нужно сделать – это закачать ее на свой хостинг – обязательно! и узнать путь до нее, а затем прописать в стилях body эту строчку (со своим путем до картинки!):

background:url("http://путь_до_картинки");

Дополнительное пояснение:Путь до картинки

И теперь наш сайт выглядит вот так:Бесшовный фон картинкой

Красивый фон для сайта – большая картинка + фоновый цвет.

Сложность: Средняя.

В этом случае мы используем в качестве фона (background) одну большую картинку, которая не повторяется и находится всегда сверху и по центру на сайте + подходящий фоновый цвет. Немного порыскав по интернету я нашел отличную картинку, которая бы идеально подошла для фона кулинарного блога, вот ее уменьшенная копия:Большое фоновое изображение

Обратите внимание на то, что данная картинка плавно перетекает слева, справа и снизу в однотонный цвет. Через фотошоп я посмотрел, что код этого цвета: #e7daae – его то и будем применять как основной в том месте, где заканчивается картинка.

После нескольких вариаций я получил вот такой фон:Фоновая картинка + фоновый цвет

Для такого отображения я дописал в файл style.css следующие строки:

background:url("http://путь_до_картинки") no-repeat center top #e7daae;

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

Комментировать через ВКонтакте:
Отзывов к посту "Все о фоне сайта – сделайте свой сайт красивым и уникальным!" уже 41:
  • kulinaris | 05.02.2013 в 16:30

    А я бы отступ хедера от верха экрана на kakje.ru сделал бы поменьше… _http://s41.radikal.ru/i094/1302/d6/daf0be0e160d.jpg
    как то некошерно смотрицца… но на вкус и цвет ;-)

    • admin | 05.02.2013 в 16:48

      Хмм :) спасибо за мнение. На скриншоте вроде все так, как есть сейчас. На счет отступа – мне наоборот по душе был бы отступ несколько больше, но там картинка не совсем подходит. Еще большая картинка в шапке в виде фона – дает два преимущества, задел на такую фишку как брендинг (будущая статья) и, как отмечалось, более плотное взаимодействие пользователей с сайтом, если делать его для контекстной рекламы (Сам был удивлен – люблю чтобы все было плотненько и ничего не мешало, но оказывается хорошая шапка шириной порядка 300px дает больший эффект, чем узенькая в плане ctr и действий пользователя). Еще привычка – не оставлять места, чтобы графические элементы дышали – даже вот на этом блоге, а это не good для хорошего веб-дизайна.
      А вообще да – кому как нравится!

  • Владимир Жданов | 05.02.2013 в 17:19

    Гуд! Отличная статья. Все подробно и понятно расписал. Можно еще комбинировать сразу несколько фоновых картинок, перечисляя их через запятую, но об этом в другой статье (с) :smile: Я попробовал сейчас на какже сделать отступ в 10px, как-то не понравилось. в 90 круче )

    • admin | 05.02.2013 в 17:28

      Сейчас на http://kakje.ru/ стоят кстати 2 картинки))) только одна в дополнительный блок вынесена. Это чтобы градиент по бокам был. Хотел описать это, но подумал что особо ни к чему :| В общем фон ограничен только фантазией

  • Виталий | 05.02.2013 в 21:14

    Мне кажется, что лучше использовать относительный путь до картинки в этом случае если вдруг вы захотите поставить этот же шаблон на другой блог не нужно будет менять путь до картинки.

    • admin | 05.02.2013 в 21:18

      В этом случае да :) Я обычно использую именно относительный путь. Но не думаю что начинающим следует это делать – к тому же в каждой теме может быть разный путь и объяснить куда именно заливать картинку не особо понятно. Не во всех же темах картинки расположены в папке /название_темы/images. В общем с абсолютным попроще, сразу понятно открывается ли картинка по этой ссылке

  • Виталий | 05.02.2013 в 21:25

    Еще один вопросик есть, правда немного не по теме, но очень хочется разобраться. Я заметил, что ваши сайты имеют ширину больше 1000 px . Но в основном все верстают шаблоны не больше 980 px.Насколько я знаю это делается для того чтобы при разрешении монитора 1024 px не было полосы прокрутки внизу экрана (окно браузера+скрол = 1024px). Почему вы используете больше чем 980 px? Может я чего-то не понимаю, вопрос без подвоха, просто я интересуюсь версткой и мне интересно.

    • admin | 05.02.2013 в 21:40

      Хороший вопрос! Да именно на 1000px лучше ориентироваться, но для себя я выбрал этот вариант. Вообще круто сделать, плавающую ширину (через параметры min-width и max-width). Минимальная – порядка 980px, максимальная – 1200-1300px – больше делать не нужно (100% ширину тем более).
      Почему такая ширина вкратце обосновал в этой статье: http://history-of-blog.ru/novosti/novaya-zhizn-bloga-history-of-blog-ru/, да уж извинят меня 15% посетителей (цифру взял из статистики своего первого блога, которая естественно не совсем точная). Ну а если подытожить – просто понравилось такое решение, хотя плавающая ширина была бы уместней

  • Виталий | 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;
    }
    СПАСИБО :|

    • admin | 05.02.2013 в 23:56

      Попробуйте вот что (речь я так понимаю о http://romanovaelena.ru/):
      для body:
      body {
      font-family: Arial, Helvetica, Sans-Serif;
      font-size: 12px;
      font-style: normal;
      font-weight: normal;
      color: #3D3D3D;
      background: #900; (добавить эту строку с фоном – ну картинку какую нужно поставить)
      }
      Дописать в style для ноликса:
      #nlx {
      margin: -10px auto 0px;
      width: 1030px; (ширину можно убрать, тогда будет на всю страницу)
      }

  • Василий | 06.02.2013 в 9:29

    Спасибо за такой простой и понятный мануал. Новичкам в самый раз. На многих тренингах по созданию сайтов сегодня этому не учат.

    • admin | 06.02.2013 в 9:33

      Ну там основное – купить домен, хостинг, показать что можно выбрать шаблон и.. в дальнее плавание!
      А мне нравятся мелочи – ведь круто же, когда можно сделать в точности то, чего хочешь

  • дед Виталя | 06.02.2013 в 14:48

    Статья и для меня очень кстати. В новый блог – новый фон!
    Я потихоньку экспериментирую, но всё делаю методом “тыка”.
    А сейчас попробую “по науке”.
    Спасибо, Антон!
    Немного оффтоп. Как будет у тебя свободная минутка (можно на “ты”, взаимно? В инете так проще, и деду приятнее ;)), взгляни на фон в другом моём блоге (урл комментария) Не слишком ли ярко в сочетании с иллюстрациями в постах?

    • admin | 06.02.2013 в 17:12

      Даже нужно на ты – это же интернет :) к чему формальности :|
      На счет фона – нее, не ярко, сочетается довольно хорошо. Но все таки на мой вкус и цвет, как говориться, я бы не делал ее повторяющуюся, а оставил бы сверху по-центру, чтобы она переходила в обычный цвет. Ну так же как я тут сделал http://kakje.ru/. Кому как, но меня немного отвлекает повторяющийся фон если прокручивать статью

  • дед Виталя | 06.02.2013 в 19:51

    Понял, спасибо большое, Антон. Мне тоже повторы не особо нравятся. Но пока не нашёл лучший для себя вариант. А вот переход в обычный цвет – это мысль.
    Попробую поэкспериментировать во всех своих 3-х блогах ;)

  • Наталия Хоробрых | 07.02.2013 в 15:12

    Очень ценная статья. В двух своих блогах сейчас как раз думаю о фоне. Вот только с кодами не люблю возиться…

    • admin | 07.02.2013 в 16:17

      Да там и возиться не надо, добавил одну строчку и делов. Больше времени уйдет на подбор картинки для фона

  • allemiko | 23.02.2013 в 21:58

    Да нужно уже менять фон, надоедает, пора сменить на что то светлое, специальных дыр что ли сделать :)

    Постоянно думаю над фоном.

      • allemiko | 24.02.2013 в 8:56

        Да я заметил :) Часто видел такие фоны на торрент пораталах или сайтов с фильмами, привлекает вот что: это выглядит не очень рекламно,так как это второстепенный фон, и еще красиво, если хорошо подобрать брендо фон к сайту.

        Подскажите не будущее, поставить фон то я могу, а вот сделать отступ сверх не имею понятия, Нужно наверное добавить еще один блог сверх в теге див?

        • admin | 24.02.2013 в 13:52

          Ссылку я зачем дал?

  • allemiko | 24.02.2013 в 14:16

    Cпасибо :) Cорри не заметил. : :oops: :|

  • Secret | 09.03.2013 в 19:02

    Спасибо! Отличная статья!
    Все подробно изложено. Автору – 5++

  • Елена Олейникова | 26.04.2013 в 15:38

    Я смотрю, ваш kakje.ru сейчас совсем по-другому выглядит. Причем весь блок (Психология и т.д.) съехал вправо. Это очередной эксперимент или вы будете делать полноценный блог?

    • admin | 26.04.2013 в 15:48

      Выглядит один в один как в статье – поэтому немного не понял о чем речь)
      Никаких экспериментов не планирую, вообще ничего не планирую – разве что продать сайты может быть – 2 уже продал. Нужно оставить как можно меньше после себя в интернете, сохранив лишь самое необходимое, а то все пропадет – а это будет обидно :(

  • Елена Олейникова | 27.04.2013 в 1:37

    Ну где же один в один? Я вижу ваш kakje.ru так: http://clck.ru/8cpqc
    По-моему, разница есть.

    • admin | 27.04.2013 в 23:15

      Хех, ага так в мазиле отображается)

  • Елена Олейникова | 28.04.2013 в 1:10

    Значит, не зря говорят – проверяйте свой блог во всех браузерах. Проверить-то не проблема, у меня их куча установлена, а вот как исправить косяк? Вы как с проблемой будете справляться?

    • admin | 28.04.2013 в 1:29

      А как же, конечно во всех браузерах нужно смотреть. Вот и проглядел – не поглядел)
      Писал шаблон на коленке и видимо когда что-то доделывал не посмотрел кроссбраузерность. Сейчас все нормально, даже в ИЕ :)
      С проблемой справиться очень просто и быстро – нужно посмотреть исходный код (Просмотр кода элемента в Хроме, либо ФайрБаг в Мазиле) и найти что не так в стилях, а потом исправить это. Нужны самые начальные знания CSS – на самом деле все очень просто.

  • Елена Олейникова | 28.04.2013 в 5:32

    Вот это ваше – “даже в ИЕ” – классная характеристика браузера :-)
    Я из-за него свой сайт на Джумле собственными руками придушила! Была еще начинающая, глупая, многого не знала. Но по курсу Попова все же сайт смогла сделать.
    Вот он везде просто отлично смотрелся, а на ИЕ ТАКАЯЯЯЯ фигня была. Расстроилась, решила, коль руки кривые и…
    Нет сайта, нет проблем.
    Иногда гляну на скриншот того своего сайта и так жалко :cry:

    • admin | 28.04.2013 в 13:40

      Обычно просто именно в эксплорере все отображается немножко по другому. Хотя все так же легко настраивается если нужно. А что уж такого страшного там было в ИЕ?

  • Nataliya | 07.05.2013 в 23:40

    Как сделать прозрачной шапку, я делаю сайт с помощью Dreamweaver.

    • admin | 08.05.2013 в 0:16

      К необходимому элементу применить прозрачность. В css – это например opacity

  • Юлия | 01.11.2013 в 17:01

    Здравствуйте. Подскажите как сделать продолжение каринки в футере пример(isif-life[точка]ru) и спозиционировать отдельные элементы по краям фона например(gavrilov.enterbook[точка]rU). А то шапку поменяла на своём сайте, а как по бокам доделать не знаю.

    • admin | 01.11.2013 в 23:03

      Сначала про человечков по бокам: собственно так же, как и написано в статье и как сделали вы. Только возьмите размер картинки побольше и учтите ширину блога (980px), для красоты картинка переливается в цвет снизу. Вот посмотрите какая картинка у него http://gavrilov.enterbook.ru/wp-content/themes/travel1/images/Page-BgTexture.jpg – то же самое как у вас сделано, только картинка больше.
      Как у Борисова: после основного блока под контент идет футер (подвал), у вас точно так же. Вместо цвета (у вас #666), сделайте background в виде картинки + цвета (для перехода), как это уже делали. Вот кстати его картинка http://isif-life.ru/wp-content/themes/isif-life/images/5.jpg.
      Как подробнее описать даже не знаю, все равно небольшие знания стилей и html нужны, чтобы последовать этим рекомендациям.

  • Константин | 02.04.2014 в 22:28

    Не знаю было или нет, но с моей точки зрения лучше заливать фоновую картинку в папку с шаблоном, в директорию, например, image/, чем в upload. А вообще сам предпочитаю использовать именно заливку цветом, просто, выполняет задачу и не грузит сайт. Для меня фон это возможность, условно говоря, затенить не нужное на сайте, те же пустоты, и сфокусировать внимание читателя на главном.

  • Александр | 01.03.2016 в 16:28

    Описано все подробно, спасибо. Но на моем сайте http://decoacoustic.ru/ не получилось. Все меню почему то другие. Что не так делаю? Подскажите, я новичок.

Имя*(обязательно)
Сайт
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Наверх