0

Снова вынужден обратиться за советом. Создал в генераторе градиента такой код:

background: -moz-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(212,228,239,1)), color-stop(37%, rgba(212,228,239,1)), color-stop(100%, rgba(170,194,209,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
background: radial-gradient(ellipse at center, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#aac2d1', GradientType=1 );

(да, возможно это плохо и неэффективно пользоваться такими генераторами, но там быстро работаешь с ползунками цвета и красивый результат на выходе)

Создал пустую страницу со всей минимальной bootstrap-разметкой, в css файле определил этот градиент для тега body - все работает.

body {
  background: -moz-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(212,228,239,1)), color-stop(37%, rgba(212,228,239,1)), color-stop(100%, rgba(170,194,209,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
  background: radial-gradient(ellipse at center, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#aac2d1', GradientType=1 );
}

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

Буду рад любым советам или наводкам, почему это происходит. Пробовал определять градиент к тегу html, к контейнеру, но все равно не заработало у меня, как надо. Заранее благодарен.

1

2 ответа 2

3

Лучше прописать

html, body{
   min-height: 100%;
}

Если вы оставите height: 100%, то, даже если высота контента превысит эти самые 100%, высота блока body останется равной высоте экрана, что может вызвать ряд проблем в дальнейшей вёрстке.

Можете сравнить получаемый градиент в обоих случаях и посмотреть в инспекторе высоту body в каждом случае:

0

Вопрос решен! Не стоило торопиться с постом вопроса.

Необходимо добавить фиксированную высоту блока. В данном случае меня вполне устраивала высота во весь экран, поэтому мое решение имеет вид:

html {
    height: 100%;
}
body {
    height: 100%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(212,228,239,1)), color-stop(37%, rgba(212,228,239,1)), color-stop(100%, rgba(170,194,209,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
    background: radial-gradient(ellipse at center, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 37%, rgba(170,194,209,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#aac2d1', GradientType=1 );
}
2
  • 100% - это относительная высота, а не фиксированная. 11 мар 2016 в 15:02
  • Да, вы правы. Я имел в виду конкретную высоту, а не фиксированную. Так как высота экрана всегда известна, то 100% от экрана - это вполне конкретно и градиент нормально заполняет фон. Если указывать фиксированную высоту, то все тоже будет работать как надо. А вот вообще без height будет работать криво - от высоты контента зависит высота body, а следовательно и заполнение градиентом.
    – Oner Ksor
    11 мар 2016 в 16:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.