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

В данном уроке мы рассмотрим все четыре способа создания Background’а (фон для сайта) по детально, которые позволят Вам осуществить задуманное, а именно:
— Фон с одного цвета
— Фон с текстуры
— Фон с помощью градиента
— Фон с большого изображения

Фон для сайта с одного цвета


Браузеры по умолчанию сайтам надают фон с белого цвета. Но его можно очень легко сменить на другой. Заходим в файл style.css и к body (тело сайта) прописываем свойствоbackground-color с помощью которого, мы и на дадим фон для сайта с другого цвета. Например свет синий, в HTML коде это будет #83C5E9

Фон для сайта с текстуры

Фон с текстуры является популярным способом для создания фона для сайта. Текстуры бывают разные,  сложными и простыми узорами, яркие и простые, например, у меня на блоге фоном является текстура и с серого картона.
Все что нам нужно сделать,  это подключить нашу текстуру с помощью css свойстваbackground-image, и она автоматически будет повторяться по оси x и оси y, так она заполнит всю нашу страницу. Но для перестраховки еще допишем и цвет фона (текстура у нас зеленая, поэтому логично и цвет фона сделать зеленым #537759).

Фон для сайта с помощью градиента


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

По этому мы создаем 1px по ширине линию с градиентом, это и будет наш фон для сайта. Сначала для страховки прописываем цвет фона background-color: #83C5E9; затем подключаем нашу градиентную линию, и с помощью css свойства background-repeat: repeat-x; заставляем нашу 1px линию повторяться по оси x.
У меня на скриншоте изображена большая градиентная линия, так делать не нужно, она должна быть 1px по ширине.

Большое фоновое изображение


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