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

Замена фона сайта okis

Один из самых часто задаваемых вопросов на форуме "Как заменить фон сайта?", в сегодняшнем уроке вы научитесь делать это с учетом некоторых тонкостей которые возникнут в процессе.

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

Поможет нам в этом css свойство background-image к которому мы подключим фоновое изображение, на практике это выглядит так:

body {

background-image: url(путь к файлу);

}

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

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

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

  1. background-attachment ( указывает будет ли прокручиваться изображение вместе с контентом )
  2. background-position ( устанавливает положение элемента относительно краев окна браузера )
  3. background-repeat ( дает знать нужно ли повторять изображение по вертикали и горизонтали )

И вот как это выглядит на практике: 

body {

background-image: url(путь к файлу);

background-attachment: fixed;

background-position: 50% 0%;

background-repeat: no-repeat;

}

С подобными установками наше изображение фона будет зафиксировано от прокрутки, установлено по центру экрана браузера, прижато к верхней границе окна,  и не будет повторяться по осям X и Y. И в этом случае стоит учитывать размерность картинки, то есть нужно выбирать изображение которое будет перекрывать окно мониторов с большим разрешением. Вполне достаточно стандартного размера 1920х1200. 

Более подробную информацию о свойствах предложенных вам выше вы можете найти на сайте: http://htmlbook.ru

Спасибо за внимание, до новых всреч. Комментируем, задаем вопросы.