CSS3 градиентный фон на теле не растягивается, а повторяется?

430

хорошо, скажем, содержание внутри <body>итоговой высоты 300px.

Если я установлю фон моего <body>использования -webkit-gradientили-moz-linear-gradient

Затем я максимизирую свое окно (или просто сделаю его выше 300 пикселей), градиент будет ровно 300 пикселей (высота содержимого) и просто повторяю, чтобы заполнить оставшуюся часть окна.

Я предполагаю, что это не ошибка, поскольку она одинакова как в webkit, так и в gecko.

Но есть ли способ заставить градиент растягиваться, чтобы заполнить окно вместо повторения?

css gradient JD Исаакс
источник

719

Примените следующий CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Изменить: Добавлено margin: 0;в объявление тела в комментариях ( Мартин ).

Изменить: Добавлено background-attachment: fixed;в объявление тела в комментариях ( Johe Green ).

Брайан Даунинг
источник

4

Я также узнал, что мне нужно добавить margin:0;на bodyили иначе я получил разрыв в нижней части моей страницы.

Мартин

8

В Chrome и Safari тело {height: 100%} приводит к тому, что страница (но не градиент) выходит за пределы области просмотра.

thSoft

13

Мне пришлось добавить background-attachment: исправлено; чтобы тело избавилось от нижнего зазора (Webkit).

j7nn7k

4

Установка фона для тела, а затем высота тега HTML до 100% делает странные вещи в Internet Explorer. Вот пример (png).

Джастин Форс

21

Убедитесь , что background-repeatи background-attachmentприходят после ваших backgroundправил. В противном случае фон все еще может повториться.

Келлен

159

Что касается предыдущего ответа, настройка htmlи bodyto height: 100%не работает, если контент должен прокручиваться. Добавление fixedк фону, кажется, исправит это - нетneed for height: 100%;

Например:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

Развернуть фрагмент

Джошуа Радд
источник

5

Это работало для меня в каждом протестированном браузере (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] и Opera [Mac]) без побочного эффекта полосы прокрутки «height: 100%» решение. Спасибо!

pipwerks

7

Примечание для тех, кто использует Sass / Compass. Вы не можете установить "fixed" непосредственно в миксине, поэтому, чтобы добавить fixed, вы добавляете свойствоbackground-attachment: fixed

Kyle Mathews

2

Если вы хотите, чтобы фон заполнял окно, или содержимое (в зависимости от того, что больше), используйте min-height:100%(в совместимых браузерах)

cjk

Мне удалось выполнить следующий код с помощью Compass: @include background (linear-Градиент (верх, красный 0%, синий 100%) исправлено);

mcranston18

Как бы я добавил третий цвет?

sbaden

17

Я знаю, что опаздываю на вечеринку, но вот более твердый ответ.

Все, что вам нужно сделать, это использовать min-height: 100%;вместо, height: 100%;а ваш градиентный фон увеличит всю высоту области просмотра без повторения, даже если содержимое прокручивается.

Нравится:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

Рикардо Зеа
источник

Если вам не нужно устанавливать высоту HTML на 100%, например, если вам нужен липкий нижний колонтитул

apieceofbart

15

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

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

Развернуть фрагмент

Я протестировал это в FireFox 3.6, Safari 4 и Chrome. Я сохраняю цвет фона в теле для любых браузеров, которые по какой-то причине не поддерживают стилизацию тега HTML.

Джон Санфорд
источник

13

Установка html { height: 100%}может нанести ущерб IE. Вот пример (png). Но вы знаете, что прекрасно работает? Просто установите свой фон на <html>теге.

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

Фон простирается до самого дна, и никаких странных прокруток не происходит. Вы можете пропустить все другие исправления. И это широко поддерживается. Я не нашел браузер, который не позволяет применять фон к тегу HTML. Это совершенно правильный CSS, и он уже давно. :)

Джастин Форс
источник

1

@Lynda Это не очень полезная обратная связь. Не могли бы вы привести случай, когда он не работает?

Джастин Форс

Извините за расплывчатость. Я не уверен, почему это не работает. Вы можете добавить градиент, htmlно он останавливается частично вниз по странице в моем случае. Добавление background-attachment:fixedдействительно решает проблему. Я видел это на нескольких сайтах, но не смог найти причину.

L84

Суть этого решения в том, что оно работало в разных браузерах (кстати, в 2012 году). Но вы все еще не указываете, о каком браузере вы говорите. Если у вас все еще есть проблемы, попробуйте добавить html, body { height: 100%; }.

Джастин Форс

Правда. Это происходит в Firefox и Chrome (не тестировал в других браузерах), и я безуспешно пробовал высоту и другие настройки (кроме background-attachment). Ну, ничего страшного, и, надеюсь, ваш ответ все еще работает для большинства. =>

L84

Все равно придется дурачиться с неповторением и исправлением.

MarsAndBack

12

На этой странице много частичной информации, но не полная. Вот что я делаю:

Создайте градиент здесь: http://www.colorzilla.com/gradient-editor/
Установите градиент на HTML вместо BODY.
Исправьте фон в HTML с помощью "background-attachment: fixed;"
Отключите верхнее и нижнее поля тела
(необязательно) Я обычно создаю, <DIV id='container'>что я помещаю весь свой контент в

Вот пример:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

Это было протестировано с IE, Chrome и Firefox на страницах различных размеров и потребностей прокрутки.

Рик Смит
источник

1

Большой! Я использовал colorzilla, и основной ответ не работал для меня. Этот сделал. Спасибо! :)

Filly

Почему вы предпочитаете делать это на HTML, а не на BODY?

Сашаикевич

@sashaikevich Отличный вопрос. Я почти не смотрел на этот ответ в течение 5 лет, поэтому я не помню вообще. Причина, по которой я это сделал, может даже не относиться ко всем обновлениям браузера. Если бы вы перенесли все это на тело, мне было бы интересно, если бы это работало так же.

Рик Смит

@RickSmith Нет, я в стиле HTML. Но я действительно перенес правила, чтобы применить их к телу, чтобы проверить, и это не имело никакого значения. Может быть, это был старый браузер ...

sashaikevich

4

Грязные; возможно вы могли бы просто добавить минимальную высоту: 100%; в HTML, и теги тела? Это или, по крайней мере, установить цвет фона по умолчанию, который также является цветом конечного градиента.

subv3rsion
источник

1

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

Джей Ди Айзекс

2

У меня были проблемы с получением ответов здесь, чтобы работать.
Я обнаружил, что лучше всего исправить полноразмерный div в теле, присвоить ему отрицательный z-индекс и добавить к нему градиент.

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

Вот полный пример https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

morefromalan
источник

0

Я использовал этот код CSS, и он работал для меня:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

Связанная информация заключается в том, что вы можете создавать свои собственные отличные градиенты в http://www.colorzilla.com/gradient-editor/

/ Sten

Netsi1964
источник

-1

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

Джо
источник

1

Пожалуйста, добавьте некоторые пояснения по ключевым аспектам вашего решения.

Рахча

-1

вот что я сделал:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

до того, как я разместил тело, сверху был промежуток, и он показывал цвет фона html. если я удаляю bgcolor html, при прокрутке вниз градиент обрезается. поэтому я плавал тело и установил его положение относительно и ширину до 100%. это работало на сафари, Chrome, Firefox, Opera, Интернет Expl .. о, подождите. :П

Что вы думаете, ребята?

Grizzy
источник

-4

вместо 100% я просто добавляю пиксель, который получил это сейчас, и он работает для всей страницы без пробелов:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

ШЛИФОВАЛЬНЫЙ
источник

3

А как насчет страниц с> 1420 пикселей в высоту?

Веритас

CSS3 градиентный фон на теле не растягивается, а повторяется?

Ответы: