Фон для сайта

На самом деле в дизайне не существует каких-то правил и ограничений. В тоже время, были созданы такие понятия как гармония и юзабилити. Методом проб и ошибок, а также здравого смысла, выискивались определённые закономерности и концепции. В данной статье я хотел бы остановить на такой штуке, как фон для сайта и разобраться что к чему. Воспользовавшись предложенной информацией, вы сможете, не тратя много времени и средств, привнести на свой сайт гармонию и юзабилити. Попробуем?

Содержание:

Введение

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

Если мы говорим о фоне для сайта, то здесь следует выделить две его составляющие: фон web-страницы и фон её содержания. Основная задача фона web-страницы заключается в том, чтобы убрать неизбежные пустоты на задний план и сфокусировать внимание пользователя на содержании сайта.

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

Что собой представляет фон? Обычно в качестве фона для сайта выступают цвет или картинка. Задание цвета является простейшим и наименее ресурсоёмким вариантом.

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

Для фиксации понадобится большая картинка, что потребует значительных ресурсов и времени на загрузку web-страницы. Другими словами, вы фокусируете внимание пользователя не столько на содержании сайта, сколько на проблеме с его загрузкой. Стоит ли это делать?

В качестве компромиссного варианта можно использовать, так называемые, паттерны. Что такое паттерн? Паттерн (англ. pattern – образец, шаблон, система) – это хорошо сформулированное и эффективное в определенном контексте типовое решение проблемы. В нашем случае, паттерном является повторяющаяся бесшовная фоновая картинка для сайта, когда один её край совместим с противоположным.

Бесшовный фон для сайта

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

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

  • Красивый фон для сайта – BgPatterns на блоге Солянка сборная от wmas

Скачать бесплатные фоны для сайта

Должен признать, что создание бесшовного фона для сайта это всё-таки дело не простое. Многие занимаются этим на профессиональной основе и стоят такие вещи не дёшево. Тем не менее, я решил собрать подборку фонов для сайта, доступных в сети Интернет бесплатно. В общей сумме их набралось 100 штук. Весит архив 6.61 Мб.

Скачать бесплатные фоны для сайта

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

Скачать бесплатно!

Как изменить фон сайта?

Что такое сайт? Сайт (от англ. site) – это набор файлов, выложенных на сервер и доступных в сети Интернет. Основу таких файлов составляют web-страницы в формате HTML. Если данная тема вам интересна, рекомендую почитать мои статьи:

Безусловно, быть «чайником» не слишком комильфо, но с чего-то же надо начинать. Да и знания, как и опыт, дело наживное, надо просто захотеть и у вас всё получится. Мы же вернёмся к фону для сайта.

Сам ХТМЛ-документ состоит из двух основных частей HEAD (метаданные) и BODY (тело документа). Очевидно, что фон сайта задается именно для второй его части. Это можно сделать через соответствующие атрибуты тега BODY, но лучше и удобней использовать CSS. Ниже я постараюсь разобрать оба варианта.

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

Как уже было сказано, работать мы будем с тегом BODY, и здесь нас интересует два атрибута: bgcolorи background. В качестве примера приведу следующий вариант:

<body bgcolor="#ffffff" background="/images/bg.jpg">
...
</body>

По умолчанию, в качестве значения фонового цвета web-страниц, большинство браузеров устанавливают белый цвет. Сам фоновый цвет можно изменить в атрибуте bgcolorтега BODY с помощью шестнадцатеричного кода или названий некоторых цветов. Подробней об этом вы можете прочесть в статье:

  • Цвет на сайте HTMLBook.ru

Для того чтобы указать в качестве фона картинку, в теге BODY используется атрибут background, значением которого является URL-адрес графического файла. Для того, чтобы понять, как правильно прописать URL-адрес фоновой картинки, я рекомендовал бы прочесть статью:

Примечательно, что таким образом вы не можете контролировать позиционирование фоновой картинки, её повторение на экране, это можно сделать только через CSS-свойства.

Как сделать фон сайта в CSS?

Гораздо удобней и результативней для создания фона сайта будет использовать соответствующие CSS-свойства. В качестве примера приведу следующий вариант:

body {
  background-color: #ffffff;
  background-image: url('/images/bg.jpg');
}

В данном случае, свойство background-colorзадаёт фоновый цвет, а background-image– фоновую картинку. Обращаю ваше внимание на то, что во втором свойстве используется конструкция url().

Ниже я приведу некоторые дополнительные CSS-свойства, которые позволяют контролировать положение фона сайта с примерами, но не вдаваясь в подробности:

  • background-attachment: fixed; – устанавливает, будет ли прокручиваться фоновая картинка вместе с содержанием сайта или нет. Значение: fixed– означает зафиксировать положение фона сайта.
  • background-position: top left; – устанавливает начальное положение фоновой картинки. Значение: top left– означает, что картинка изначально будет находится в верхнем левом углу.
  • background-repeat: no-repeat; – устанавливает, как будет повторяться фоновая картинка. Значение: no-repeat– означает, что картинка повторяться не будет. Из интересного отмечу значения repeat-x(повторение только по горизонтали) и repeat-y(повторение только по вертикали).

Ниже я приведу ряд готовых примеров стандартных задачек.

Как сделать фиксированный фон сайта?

Такой вариант актуален, когда используется большая картинка, которая должна быть зафиксирована при прокрутке web-страницы.

body {
  background-color: #ffffff;
  background-image: url('/images/bg.jpg');
  background-attachment: fixed; /* фиксировать */
}

Как сделать фиксированный фон сверху или снизу?

Такой вариант актуален, когда используется фоновый цвет и нужно украсить сверху шапку или снизу подвал web-страницы фоновой картинкой, повторяющейся по горизонтали.

body {
  background-color: #ffffff;
  background-image: url('/images/bg.jpg');
  background-position: top; /* закрепить сверху */
  background-repeat: repeat-x; /* повторять по горизонтали */
}

или

body {
  background-color: #ffffff;
  background-image: url('/images/bg.jpg');
  background-position: bottom; /* закрепить снизу */
  background-repeat: repeat-x; /* повторять по горизонтали */
}

Думаю, идею вы поняли и сможете сделать тоже самое с фиксацией фона по левому (left) и/или правому краю (right), но уже с повторением по вертикали (repeat-y). Также интересным вариантом служит случай, когда в качестве фона сайта выступает картинка для содержания, обычно по центру (center), повторение идет тоже по вертикали (repeat-y).

Подведём итоги

Дизайн сайта – это широкое поле для вашего творчества. Здесь нет границ, но есть рекомендации. Фон сайта во многом способствует фокусировке пользователя на его содержании. Оптимальный вариант: темный фон сайта, белый фон содержания, черный текст и синие подчеркнутые ссылки. Как говорит Стив Круг, специалист по тестированию юзабилити и дизайну интерфейсов: не заставляйте меня думать – и это правильно. У большинства из нас сложились строго определенные стереотипы восприятия и когда нас заставляют их ломать, это утомляет. Любите своих посетителей и читателей, выбирайте и используйте правильный фон сайта. Как это сделать в HTML и CSS вы теперь знаете. У меня всё. Спасибо за внимание. Удачи!