Как сделать градиентный фон на веб-странице?
Для создания градиентов предназначена функция 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. Вид веб-страницы с градиентным фоном
Автор: Влад Мержевич
Источник: webref.ru