Часто страницы сайта делают с фоном в виде картинки. Существует три основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.
Градиент по горизонтали
Сначала нужно вырезать изображение шириной в 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; }
Таким образом, мы показали три способа, как сделать фон картинкой. Безусловно, существуют случаи, когда фон задается по другим правилам. Мы затронули самые основные и популярные варианты.
Отличный урок, все просто и понятно. Спасибо большое автору.