Как растянуть градиент на всю страницу css
Градиенты устанавливаются для свойства background-image, соответственно у родительского элемента должна быть задана высота. Рассмотрим для примера линейный градиент на всю страницу:
body height: 100vh; /* Направление градиента по вертикали от белого сверху к розовому снизу */ background-image: linear-gradient(white, pink); > Растянуть linear-gradient на весь body
Убрать повторение для фона, а для body и html задать высоту 100%:
html, body < height: 100%; >body
Отслеживать
ответ дан 17 мар 2016 в 18:55
Ihor Tkachuk Ihor Tkachuk
1,296 1 1 золотой знак 8 8 серебряных знаков 12 12 бронзовых знаков
Спасибо! А можете объяснить, почему надо так делать?
17 мар 2016 в 18:57
@Юрий, По-умолчанию высота body равна высоте контента внутри него, поэтому мы задаем ему высоту 100% чтобы растянуть его на всю страницу. А чтобы body задать высоту 100%, нужно чтобы и у родителя была высота 100%.
17 мар 2016 в 19:04
Почему-то не работает с height: 100% , пришлось сделать так:
html, body
Отслеживать
ответ дан 14 июн в 12:17
Stan.Podoba Stan.Podoba
1 1 1 бронзовый знак
- html
- css3
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как растянуть градиент на всю страницу css
Собственно, Вы не правы.
😉
Но такой способ только в IE работает вроде. может всетаки есть другие решения?
Еще один способ придумал: создать картинку с градиентом и присвоить ей следующий style:
| position:absolute; top:0; left:0; margin:0; padding:0; width:100%; height:100%; z-index:-999; |
Но такой способ растягивает градиент нормально только если текста немного на странице и нет возможности прокручивать страницу.
автор: AlexSol (30.06.2008 в 22:19) письмо автору
я прав, потому что то что вы придумали это полу-решения. единого нет.
хотя могу предложить вариант, если вас не пугает слово flash
автор: Blaster (01.07.2008 в 10:43) письмо автору
Это слово меня пугает, еще больше оно будет пугать посетителей сайта.
А вот на JS это вполне реально сделать.
автор: AlexSol (01.07.2008 в 10:48) письмо автору
автор: elenaki (01.07.2008 в 11:37) письмо автору
flash пугает посетителей? первый раз слышу. может, это специальный, посетителе-отпугивающий ролик :O?
автор: Blaster (01.07.2008 в 20:12) письмо автору
Просто у многих людей, флэш бывает не установлен в браузере. Получается, тоже полу-решение.
автор: AlexSol (01.07.2008 в 22:51) письмо автору
вы просто не в теме. флеш плеер 6 вшит в XP а плее9 в Висту.
автор: GeorgeIV (02.07.2008 в 09:37) письмо автору
только почему то всегда просят установить флэш-плэйер.
автор: elenaki (02.07.2008 в 10:30) письмо автору
это какие-то динозавры. к нам такие не ходят.
автор: Eugene77 (11.07.2008 в 19:27) письмо автору
Интересно!
Я думал, flesh всегда на передний план норовит выскочить.
Вы придумали как её приручить?
автор: AlexSol (12.07.2008 в 09:24) письмо автору
если в код подключения flash добавить то можно помещать объекты поверх него
автор: Eugene77 (12.07.2008 в 20:36) письмо автору
>если в код подключения flash добавить то можно помещать объекты поверх него
От настроек браузера не будет зависеть?
автор: AlexSol (12.07.2008 в 23:09) письмо автору
настройки браузера на отображение флеша имею только одно влияние — либо флешь разрешен либо нет 🙂
автор: Dr Lines (12.07.2008 в 08:41) письмо автору
Градиентный фон сделать очень просто.
Вот, например, как на этом сайте я сделал
http://91.202.197.190/lineradio/
И конечно же, этот фон рисуется из картинки шириной 1 px и высотой 2** (сколько надо)
Для простого примера горизонтального градиента, можно использовать одну такую полоску в качестве фона блока , и растягиваться она будет на всю страницу.
для этого в стиле надо прописать
В данном случае мы используем картинку горизонтального градиента (bg_gradient.png) с высотой 1px.
background-repeat:repeat-Y — тут указывается что растягиваться она будет только по оси Y (тогишь по вертикали)
background-color:rgb(200,200,200); — и тут указан в RGB стандарптный цвет фона нашей странички, там где нет градиента.
автор: AlexSol (12.07.2008 в 09:21) письмо автору
это все хороше, но вопрос был как растянуть, а не поместить сверху страницы
автор: Dr Lines (12.07.2008 в 09:45) письмо автору
Я подробно описал, как при помощи стилей CSS растянуть изображение (градиентный фон) на всю длину страницы как фон.
автор: AlexSol (12.07.2008 в 11:01) письмо автору
css не позволяет растягивать фоновые изображения. вы предлагаете переход градиента фмксированной высоты в сплошной цвет.
автор: Eugene77 (12.07.2008 в 20:38) письмо автору
Не могли бы вы прикрепить здесь и саму картинку.
А то уж очень неожиданно выглядит ваше решение.
Хочется в начале воспроизвести его в точности как вы делали.
автор: Dr Lines (12.07.2008 в 22:07) письмо автору
Вот картинка для горизонтального градиента.
http://91.202.197.190/lineradio/images/backgr_list_top.png (6x337px 467байт)
background-repeat тут надо задать как repeat-x (по горизонтали).
Пример будет выглядеть так.
автор: Eugene77 (13.07.2008 в 18:52) письмо автору
Да!
Такой градиент выглядит вполне приятно.
Но в начале вы говорили о картинках меньшего размера.
С ними что-то не так?
Расскажите, пожалуста! Поделитесь опытом!
автор: Dr Lines (13.07.2008 в 19:33) письмо автору
В данном примере толщина полоски 6px.
Чтож, я действительно не случайно сделал ее толще.
Сделано это с целью облегчить нагрузку для браузера.
Т.к. дання картинка дублируется множество раз на экране, то чем она шире, тем браузер быстрее ее продублирует.
автор: Eugene77 (14.07.2008 в 18:51) письмо автору
Шире — это понятно.
А короче нельзя?
Ступенчато получается?
Вы пробовали уже всё: gif, jpg, самое плавное у png?
Или это случайный выбор?
Или зависит от браузера?
автор: AlexSol (14.07.2008 в 19:50) письмо автору
у png нет потери качества. высота картики с градиентом делается под ваши нужды.
ккой высоты хотите градиет такой и рисуете на картинке.
растягивать фоновые изображения в css нельзя
автор: Eugene77 (16.07.2008 в 20:36) письмо автору
Как же тогда сделать градиентный фон на форуме?
Высота страницы разная всегда получается, да и ширина зависит от монитора.
автор: elenaki (16.07.2008 в 20:45) письмо автору
в боди стиль с градиентом (картинка определенной высоты) всегда вверху и фоном цвета у. градиент плавно переходит из цвета х в цвет у. внутри боди — слой с градиентом всегда снизу (наоборот — из цвета у в цвет х, тоже картинка).
автор: Eugene77 (17.07.2008 в 19:53) письмо автору
Cпасибо за идею!
Вообще,очень полезная темаполучилась — так много узнал нового!
Ещё раз спасибо всем!
автор: Dr Lines (14.07.2008 в 20:43) письмо автору
Растягивать картинку порседством css нельзя. Длина картинки определяется заранее при создании в графическом редакторе. Длина на качестве градиента практически не отражается (Зависит от графического редактора). Например я использую для этих целей редактор Corel Drow.
Почему использую png?
Вопервых PNG (Portable Network Graphics) — переносимая сетевая графика. Тогишь разработана для переноса по сети.
Вовторых изображения png отличаются высоким качеством. Поэтому у png действительно градиент выглядит плавнее чем у других форматов.
Как растянуть Linear-gradient на весь блок?
Не растягивается background: liner-gradient, для html и body задано 100%(через _reset.css), для бэкграунда давал и cover и проценты выставлял 100% 100%, всё равно у фона появляется белая полоса снизу.
@import "_reset"; @import "_libs"; @import "_vars"; @import "_fonts"; body < height: 100%; background: linear-gradient(125deg, rgba(255,124,0,1) 0%, rgba(0,0,0,1) 38%, rgba(0,0,0,1) 92%, rgba(98,48,1,1) 100%) no-repeat 100% 100%; font-family: BebasNeue, sans-serif; font-weight: 400; font-size: 40px; >.todo-list__container < display: flex; flex-direction: column; justify-content: center; max-width: 550px; >.addform < display: flex; flex-wrap: wrap; width: 100%; margin-left: 5vw; background-color: #ffffff; color: #000000; border-radius: 20px; overflow: hidden; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); margin-bottom: 5vh; >.addform__title < width: 100%; >.todo-list < width: 100%; margin-left: 5vw; background-color: #ffffff; color: #000000; border-radius: 20px; overflow: hidden; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); >.addform__input < border-radius: 20px; padding: 15px; box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 1); margin-left: 20px; margin-bottom: 20px; font-size: 24px; width: 65%; >.addform__input:focus < box-shadow: inset 0px 0px 10px 0px rgba(92, 49, 0, 1); >.addform__button < width: 25%; border-radius: 20px; padding: 10px 15px 6px 15px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1); margin-left: 20px; margin-bottom: 20px; font-size: 30px; color: #ffffff; background-color: rgba(0,0,0,1); >.title < font-family: Hurricane, sans-serif; font-size: 80px; text-align: center; padding-left: 50px; padding-right: 50px; border-radius: 20px; margin: 20px; box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 1); >.todo-list__items < padding: 20px; >.todo-list__item < border-radius: 20px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1); position: relative; padding-left: 20px; padding-right: 20px; position: relative; overflow: hidden; >.todo-list__item:hover < .todo-list__change-btn< opacity: 0.9; >.todo-list__delete-btn < opacity: 0.9; >> .todo-list__change-btn < opacity: 0; background-color: #000000; color: #ffffff; position: absolute; top: 0; bottom: 0; width: 10%; right: 10%; transition: all 0.6s; >.todo-list__delete-btn < opacity: 0; background-color: rgb(255, 0, 0); color: #ffffff; position: absolute; top: 0; bottom: 0; width: 10%; right: 0; transition: all 0.6s; >.todo-list__item:not(:last-child) < margin-bottom: 20px; >.todo-list__item p
- Вопрос задан более года назад
- 383 просмотра
8 комментариев
Простой 8 комментариев