Как фоном сайта сделать картинку

Решили поставить картинку на фон сайта, но не знаете как это сделать и какой css код использовать? Эта не беда, сейчас мы это сделаем быстро и легко.

Сначала нужно разобраться, какую картинку вы будете размещать на фоне сайта. Это могут быть готовые обои (большого размера, например 1920-1080), или маленькая картинка (бесшовный фон).

Пример готовых обоев: просмотр картинки 1920-1080

Пример бесшовного фона:

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

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

Код стиля для готовых обоев:

  body {
   background: url(ССЫЛКА НА КАРТИНКУ) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
   }

В результате получается вот это — просмотр

Код стиля для бесшовного фона:

body {
    background-image: url(ССЫЛКА НА КАРТИНКУ); /* Путь к фоновому изображению */
    background-attachment: fixed; /* Фиксируем фон веб-страницы */
   }

Используя эти коды, вы сможете легко сделать фон своего сайта картинкой, а какой — выбирать вам.