Как сделать градиентный фон на веб-странице?

Для создания градиентов предназначена функция linear-gradient(), которая добавляется к свойству background или background-image.

background: linear-gradient(#9A5044, #E8D9A9);

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

Чтобы сделать градиент в виде фона веб-страницы, background с linear-gradient() следует добавить к селектору body. Однако такой фон привязан к высоте содержимого <body> и если оно меньше высоты веб-страницы, то результат получается так себе (рис. 1).

Вид градиента

Рис. 1. Вид градиента

Такое можно избежать, если к background добавить параметр fixed, тогда высота градиента будет совпадать с высотой веб-страницы, а при прокрутке содержимого градиент остаётся неподвижным (пример 1).

Пример 1. Градиентный фон

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body { 
    /* Градиент */ 
    background: linear-gradient(#9A5044, #E8D9A9) fixed;
   }
   div {
    width: 70%; /* Ширина */
    margin: auto; /* Выравниваем по центру */
    min-height: 2000px; /* Минимальная высота */
    background: #fff; /* Белый цвет фона */
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

Результат данного примера показан на рис. 2. Для наглядности добавлен высокий белый блок, показывающий что при прокрутке веб-страницы градиент не меняется.

Вид веб-страницы с градиентным фоном

Рис. 2. Вид веб-страницы с градиентным фоном

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 26.09.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid