Tło gradientowe CSS3 ustawione na ciele nie rozciąga się, ale powtarza?

429

ok, powiedzmy, że zawartość w <body>sumie wynosi 300 pikseli.

Jeśli ustawię tło mojego <body>używania -webkit-gradientlub-moz-linear-gradient

Następnie maksymalizuję okno (lub po prostu zwiększam go do 300 pikseli), gradient będzie miał dokładnie 300 pikseli (wysokość zawartości) i po prostu powtórzę, aby wypełnić resztę okna.

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

Ale czy istnieje sposób na rozciągnięcie gradientu w celu wypełnienia okna zamiast powtarzania?

css gradient JD Isaacks
źródło

717

Zastosuj następujący CSS:

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

Edycja: Dodano margin: 0;do deklaracji treści według komentarzy ( Martin ).

Edycja: Dodano background-attachment: fixed;do deklaracji treści w komentarzach ( Johe Green ).

Bryan Downing
źródło

4

Dowiedziałem się też, że muszę dodać margin:0;na bodyalbo mam lukę w dolnej części mojej stronie.

Martin

8

W Chrome i Safari body {height: 100%} powoduje, że strona (ale nie gradient) wychodzi poza obszar wyświetlania.

thSoft

13

Musiałem dodać załącznik w tle: naprawiony; do ciała, aby pozbyć się dolnej szczeliny (Webkit).

j7nn7k

4

Ustawienie tła dla ciała, a następnie wysokości znacznika HTML na 100%, robi dziwne rzeczy w Internet Explorerze. Oto przykład (png).

Justin Force

21

Upewnij się, że background-repeati background-attachmentpochodzić po swoich backgroundzasad. W przeciwnym razie tło może się nadal powtarzać.

kellen

159

Jeśli chodzi o poprzednią odpowiedź, ustawienie htmli bodyaby height: 100%nie wydaje się działać, jeśli treść musi zwoju. Dodanie fixeddo tła wydaje się to naprawić - nieneed for height: 100%;

Na przykład:

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

Rozwiń fragment kodu

Joshua Rudd
źródło

5

Działa to dla mnie w każdej testowanej przeglądarce (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] i Opera [Mac]) bez efektu ubocznego paska przewijania „wysokość: 100%” rozwiązanie. Dzięki!

pipwerks

7

Uwaga dla osób korzystających z Sass / Compass. Nie można ustawić „naprawiono” bezpośrednio w miksie, więc aby dodać naprawiono, należy dodać właściwośćbackground-attachment: fixed

Kyle Mathews

2

Jeśli chcesz, aby tło wypełniało okno lub treść (w zależności od tego, która wartość jest większa), użyj min-height:100%(w zgodnych przeglądarkach)

cjk

Byłem w stanie wykonać następujący kod za pomocą Compass: @include background (liniowy gradient (góra, czerwony 0%, niebieski 100%) naprawiony);

mcranston18,

Jak dodać trzeci kolor?

sbaden,

17

Wiem, że spóźniam się na przyjęcie, ale oto solidniejsza odpowiedź.

Wszystko, co musisz zrobić, to użyć min-height: 100%;zamiast, height: 100%;a tło gradientowe powiększy całą wysokość rzutni bez powtarzania, nawet jeśli zawartość jest przewijana.

Lubię to:

html {
    min-height: 100%;
}

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

Ricardo Zea
źródło

Chyba że musisz ustawić wysokość HTML na 100%, na przykład, jeśli potrzebujesz lepkiej stopki

apieceofbart

15

Oto, co zrobiłem, aby rozwiązać ten problem ... pokaże gradient dla całej długości treś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>

Rozwiń fragment kodu

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

John Sanford
źródło

13

Ustawienie html { height: 100%}może siać spustoszenie w IE. Oto przykład (png). Ale wiesz, co działa świetnie? Wystarczy ustawić tło na <html>tagu.

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

Tło rozciąga się na dół i nie występuje dziwne przewijanie. Możesz pominąć wszystkie inne poprawki. I jest to szeroko obsługiwane. Nie znalazłem przeglądarki, która nie pozwala zastosować tła do tagu HTML. Jest to całkowicie poprawny CSS i już od jakiegoś czasu. :)

Justin Force
źródło

1

@Lynda To niezbyt pomocne opinie. Czy miałbyś coś przeciwko, gdyby okazało się, że to nie działa?

Justin Force

Przepraszam, że jestem niejasny. Nie jestem pewien, dlaczego to nie działa. Możesz dodać gradient do, htmlale w moim przypadku zatrzymuje się on częściowo w dół strony. Dodanie background-attachment:fixedrozwiązuje problem. Widziałem to na więcej niż jednej stronie, ale nie byłem w stanie znaleźć przyczyny.

L84,

Chodzi o to, że to rozwiązanie działało w różnych przeglądarkach (nawiasem mówiąc, w 2012 roku). Ale nadal nie podajesz, o której przeglądarce mówisz. Jeśli nadal masz problemy, spróbuj dodać html, body { height: 100%; }.

Justin Force,

Prawdziwe. Zdarza się to w Firefox i Chrome (nie testowałem w innych przeglądarkach) i próbowałem wysokości i różnych innych ustawień bez powodzenia (z wyjątkiem załącznika w tle). No cóż, nic wielkiego i mam nadzieję, że twoja odpowiedź nadal działa dla większości. =>

L84,

Nadal muszę oszukiwać bez powtarzania i naprawiony.

MarsAndBack

12

Na tej stronie znajduje się wiele częściowych informacji, ale nie pełna. Oto co robię:

Utwórz gradient tutaj: http://www.colorzilla.com/gradient-editor/
Ustaw gradient HTML zamiast BODY.
Napraw tło w HTML za pomocą „background-załącznika: fixed;”
Wyłącz górny i dolny margines na BODY
(opcjonalnie) Zwykle tworzę plik <DIV id='container'>, w którym umieszczam całą moją 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;
}

Zostało to przetestowane w IE, Chrome i Firefox na stronach o różnych rozmiarach i potrzebach przewijania.

Rick Smith
źródło

1

Świetny! Korzystałem z colorzilli i główna odpowiedź nie działała dla mnie. Ten zrobił. Dziękuję Ci! :)

Filly

Dlaczego wolisz to robić w HTML, a nie w BODY?

sashaikevich

@sashaikevich Świetne pytanie. Przez 5 lat prawie nie patrzyłem na tę odpowiedź, więc w ogóle nie pamiętam. Powód, dla którego to zrobiłem, może nawet nie mieć zastosowania do wszystkich aktualizacji przeglądarki. Jeśli przeniosłeś to wszystko na ciało, byłbym ciekawy, czy to zadziała tak samo.

Rick Smith

@RickSmith Nope, stylizowałem HTML. Ale przesunąłem reguły, aby zastosować je teraz do ciała, aby sprawdzić, i to nie miało znaczenia. Może to była stara przeglądarka ...

sashaikevich

4

Brudny; może wystarczy dodać minimalną wysokość: 100%; do html i tagów treści? To lub przynajmniej ustaw domyślny kolor tła, który jest również końcowym kolorem gradientu.

subv3rsion
źródło

1

Domyślne tło ustawione jako kolor końcowego gradientu byłoby świetnym rozwiązaniem, gdyby gradient się zatrzymał, ale nie tylko przestaje się powtarzać, więc domyślne tło byłoby widoczne tylko wtedy, gdy gradient nie jest obsługiwany.

JD Isaacks

2

Miałem problem z uzyskaniem odpowiedzi tutaj do pracy.
Odkryłem, że lepiej było 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

morefromalan
źródło

0

Użyłem tego kodu CSS i zadziałał dla mnie:

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 świetne gradienty na stronie http://www.colorzilla.com/gradient-editor/

/ Sten

Netsi1964
źródło

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

Joe
źródło

1

Dodaj wyjaśnienie kluczowych aspektów swojego rozwiązania.

Rachcha

-1

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 unosiłem ciało, na górze była luka, która pokazywała kolor tła HTML. jeśli usunę bgcolor html, po przewinięciu w dół gradient zostanie obcięty. więc unosiłem ciało i ustawiłem jego pozycję na względną, a szerokość na 100%. działało na safari, chrome, firefox, opera, eksploracja Internetu ... oh czekaj. : P

co myślicie?

grizzy
źródło

-4

zamiast 100% dodałem tylko trochę pixxela, który dostałem teraz i działa na całej stronie bez przerwy:

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

SANDER
źródło

3

co ze stronami o wysokości> 1420 pikseli?

veritas

Tło gradientowe CSS3 ustawione na ciele nie rozciąga się, ale powtarza?

Odpowiedzi: