Как сделать фон картинкой в CSS

Часто страницы сайта делают с фоном в виде картинки. Существует три основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.

Как сделать фон картинкой в CSS

Градиент по горизонтали

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

body {
  background: url("/images/fon.jpg") repeat-x #e3e3e3;
}

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

2. Градиент по вертикали

Здесь действует тот же принцип, только нужно уже вырезать картинку высотой в 1 пиксель, и при необходимости выровнять фон по центру.

body {
  background: url("/images/fon.jpg") repeat-y center #e3e3e3;
}

3. Обычное изображение

Здесь мы просто указываем путь к изображению, которое мы можем отобразить один раз или замостить его по высоте и ширине экрана.

body {
  background: url("/images/fon.jpg") no-repeat #e3e3e3;
}

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

Комментарий к “Как сделать фон картинкой в CSS”

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *