Как изменить фоновое изображение сайта

Здравствуйте, сегодня мы рассмотрим некоторые варианты замены фонового изображения сайта, что позволит придать толику индивидуальности шаблонному дизайну не совершая никаких сложных манипуляций. Естественно при этом работать нам придется с редактором кода css, который находится по адресу "Настройки - CSS". 

Первым вариантом который мы опробуем станет установка бесшовной текстуры фона. Такая текстура повторяется по вертикали и горизонтали без видимых стыков и создает сплошной фон сайта. Значение fixed в коде, указывает что фон не будет прокручиваться вместе с содержимым сайта, а значение repeat что фоновая картинка повторяется по осям x и y.

body {
background: url("/file/image.jpg") repeat fixed;
}

В свою же очередь, заменив значение fixed на scroll, мы получим фон который будет подвижен.

body {
background: url("/file/image.jpg") repeat scroll;
}

Теперь попробуем установить в качестве фонового изображения полноразмерное изображение. Для этого необходимо выбрать и подготовить изображение достаточного размера (я использую для этого 1920 х 1200 пикс.) при этом необходимо не забывать о весе изображения, ведь если фон будет слишком "тяжелый" у пользователей с слабым интернетом будут проблемы со скоростью загрузки картинки. Итак код для полного размера будет выглядеть так:

body {
background: url("/file/image.jpg") no-repeat fixed center;
}

Как вы уже можете заметить добавилось значение center, которое устанавливает фон по центру экрана и repeat был заменен на no-repeat что бы фон не повторялся, потому что стыки такого изображения будут заметны.

Стоит добавить, что если вам нужно что бы изображение масштабировалось в соответствие с размерами экрана, достаточно дописать свойство background-size и наш код станет выглядеть так:

body {
background: url("/file/image.jpg") no-repeat fixed center;
background-size: cover;
}

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