Как заменить фон на сайте.
Один из самых часто задаваемых вопросов на форуме "Как заменить фон сайта?", в сегодняшнем уроке вы научитесь делать это с учетом некоторых тонкостей которые возникнут в процессе.
Итак наш вопрос решается записью в редакторе CSS которая указывает что именно и как должно отображаться в качестве фона у вашего сайта. В данном случае нас интересует элемент body который предназначен для хранения основной информации на сайте, вся информация на сайте выводится непосредственно в этом теге, и именно для него устанавливается фоновое изображение которое заполняет все видимое пространство сайта.
Поможет нам в этом css свойство background-image к которому мы подключим фоновое изображение, на практике это выглядит так:
body {
background-image: url(путь к файлу);
}
Нам остается загрузить изображение с помощью опции загрузка файлов в админпанели сайта (или можно воспользоваться любым хостингом изображений, но стоит учесть что надежнее все таки загружать изображения себе на сайт, тем более что пространство неограничено) и заменить текст в скобках на ссылку полученную в результате загрузки.
При этом стоит учитывать что данный способ подходит для установки в качестве фона только бесшовных текстур, так как изображение фона будет повторяться по вертикали и горизонтали и складываться в одну текстуру не имеющую границ.
Для того что бы установить в качестве фона полноразмерное изображение нужно прописать дополнительные свойства которые зафиксируют и расположат картинку в нужном нам месте. В этом нам помогут свойства:
- background-attachment ( указывает будет ли прокручиваться изображение вместе с контентом )
- background-position ( устанавливает положение элемента относительно краев окна браузера )
- background-repeat ( дает знать нужно ли повторять изображение по вертикали и горизонтали )
И вот как это выглядит на практике:
body {
background-image: url(путь к файлу);
background-attachment: fixed;
background-position: 50% 0%;
background-repeat: no-repeat;
}
С подобными установками наше изображение фона будет зафиксировано от прокрутки, установлено по центру экрана браузера, прижато к верхней границе окна, и не будет повторяться по осям X и Y. И в этом случае стоит учитывать размерность картинки, то есть нужно выбирать изображение которое будет перекрывать окно мониторов с большим разрешением. Вполне достаточно стандартного размера 1920х1200.
Более подробную информацию о свойствах предложенных вам выше вы можете найти на сайте: http://htmlbook.ru
Спасибо за внимание, до новых всреч. Комментируем, задаем вопросы.