CSS3 gradient tło ustawione na ciele nie rozciąga się, ale zamiast tego powtarza?

Ok powiedz, że zawartość wewnątrz <body> wynosi 300px.

Jeśli ustawiam tło mojego <body> używając -webkit-gradient lub -moz-linear-gradient

Następnie maksymalizuję moje okno (lub po prostu sprawiają, że wyższy niż 300px) gradient będzie dokładnie 300px wysokości (wysokość zawartości) i po prostu powtórzyć, aby wypełnić resztę okna.

Zakładam, że to nie jest błąd, ponieważ jest taki sam zarówno w webkit jak i gecko.

Ale czy jest sposób na rozciągnięcie gradientu, aby wypełnić okno zamiast powtórki?

 441
cssgradient
Author: kiamlaluno, 2010-05-19
Source

12 answers

Zastosuj następujący CSS: 

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

Edit: Added margin: 0; to body declaration per comments ( Martin ).

Edit: Added background-attachment: fixed; to body declaration per comments ( Johe Green ).

 740
Author: Bryan Downing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:48

Jeśli chodzi o poprzednią odpowiedź, ustawienie html i body na height: 100% wydaje się nie działać, jeśli zawartość wymaga przewinięcia. Dodanie fixed do tła wydaje się to naprawiać-nie need for height: 100%;

Np.: 

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}
 170
Author: Joshua Rudd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-25 19:43:54

Wiem, że jestem spóźniony na imprezę, ale mam bardziej solidną odpowiedź.

Wystarczy użyć min-height: 100%; zamiast height: 100%;, a twoje gradientowe tło rozszerzy całą wysokość widoku bez powtarzania, nawet jeśli zawartość jest przewijalna.

Tak: 

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}
 25
Author: Ricardo Zea,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-03 23:47:37

Oto, co zrobiłem, aby rozwiązać ten problem... wyświetli gradient dla całej długości zawartości, a następnie po prostu powróci do koloru tła (Zwykle ostatni kolor w gradiencie).

   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>

Testowałem to w Firefoksie 3.6, Safari 4 i Chrome, zachowuję kolor tła w ciele dla wszystkich przeglądarek, które z jakiegoś powodu nie obsługują stylowania znacznika HTML.

 15
Author: John Sanford,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-25 19:53:13

Ustawienie {[1] } może siać spustoszenie w IE. Oto przykład (png).Ale wiesz, co działa świetnie? Po prostu Ustaw tło na znaczniku <html>. 

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

Tło rozciąga się na dół i nie występuje żadne dziwne zachowanie przewijania. Możesz pominąć wszystkie inne poprawki. Cieszy się to szerokim poparciem. Nie znalazłem przeglądarki, która nie pozwala zastosować tła do tagu html. Jest to całkowicie poprawny CSS i jest od jakiegoś czasu. :)

 14
Author: Justin Force,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-22 22:49:09

Na tej stronie jest wiele częściowych informacji, ale nie kompletnych. Oto co robię:

  1. Utwórz gradient tutaj: http://www.colorzilla.com/gradient-editor/
  2. Ustaw gradient na HTML zamiast BODY.
  3. napraw tło w HTML za pomocą "background-attachment: fixed;"
  4. Wyłącz górny i dolny margines na korpusie
  5. (opcjonalnie) Zwykle tworzę <DIV id='container'>, w którym umieszczam całą zawartość

Oto przykład: 

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;
}

To zostało przetestowane z IE, Chrome i Firefox na stronach o różnych rozmiarach i potrzebach przewijania.

 12
Author: Rick Smith,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-27 17:24:59

Brudne; może mógłbyś po prostu dodać min-height: 100%; do html i body tags? To lub przynajmniej ustawić domyślny kolor tła, który jest również kolor gradientu końcowego.

 4
Author: subv3rsion,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-19 20:57:54

Miałem problem z uzyskaniem odpowiedzi tutaj do pracy.
Okazało się, że lepiej naprawić Pełnowymiarowy div w ciele, nadać mu ujemny Indeks z i dołączyć do niego gradient. 

<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>

Oto pełna próbka https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

 2
Author: morefromalan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-18 22:20:44

Użyłem tego kodu CSS i mi się udało: 

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;
}

Powiązaną informacją jest to, że możesz tworzyć własne wielkie gradienty w http://www.colorzilla.com/gradient-editor/

/Sten

 0
Author: Netsi1964,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-01 08:14:47 
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
Author: Joe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-27 11:46:59

Oto co zrobiłem: 

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%;
}

Zanim wypłynąłem z ciała, była luka na górze i pokazywała kolor tła html. jeśli usunę bgcolor html, po przewinięciu w dół, gradient zostanie wycięty. więc wypłynąłem ciało i ustawiłem jego pozycję na względną, a szerokość na 100%. działał na safari, chrome, firefox, opera, Internet expl.. czekaj. : P

Co myślicie?
 -1
Author: grizzy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-18 16:14:55

Zamiast 100% po prostu dodaję jakiś pixxel dostał to teraz i działa na całą stronę bez luki: 

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }
 -4
Author: SANDER,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-15 15:45:30