Lo sfondo sfumato CSS3 impostato sul corpo non si allunga ma si ripete?

430

ok dire che il contenuto all'interno dei <body>totali è 300 px.

Se imposto lo sfondo del mio <body>utilizzo -webkit-gradiento-moz-linear-gradient

Quindi ingrandisco la mia finestra (o semplicemente la faccio diventare più alta di 300 px) la pendenza sarà esattamente alta 300 px (l'altezza del contenuto) e ripeterò per riempire il resto della finestra.

Suppongo che questo non sia un bug poiché è lo stesso sia in webkit che in gecko.

Ma c'è un modo per allungare il gradiente per riempire la finestra invece di ripetere?

css  gradient 
— JD Isaacks
fonte

Risposte:

718

Applica il seguente CSS:

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

Modifica: aggiunta margin: 0;alla dichiarazione del corpo per commenti ( Martin ).

Modifica: aggiunto background-attachment: fixed;alla dichiarazione del corpo per commenti ( Johe Green ).

— Bryan Downing
fonte
4
Ho anche scoperto che avevo bisogno di aggiungere margin:0;su body, altrimenti ho avuto un vuoto in fondo alla mia pagina.
— Martin,
8
In Chrome e Safari, body {height: 100%} risulta che la pagina (ma non il gradiente) si estende dalla finestra.
— thSoft
13
Ho dovuto aggiungere un allegato in background: risolto; al corpo per sbarazzarsi del gap inferiore (Webkit).
— j7nn7k,
4
Impostare uno sfondo sul corpo e quindi l'altezza del tag html al 100% fa cose strane in Internet Explorer. Ecco un esempio (png).
— Forza Justin,
21
Assicurarsi che background-repeate background-attachmentvenuto dopo le vostre backgroundregole. Altrimenti, lo sfondo potrebbe ancora ripetere.
— Kellen,
159

Per quanto riguarda una risposta precedente, l'impostazione htmle bodyto height: 100%non sembrano funzionare se il contenuto deve scorrere. L'aggiunta fixedallo sfondo sembra risolverlo - noneed for height: 100%;

Per esempio:

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

— Joshua Rudd
fonte
5
Questo ha funzionato per me in tutti i browser che ho testato (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] e Opera [Mac]) senza l'effetto collaterale della barra di scorrimento di "height: 100%" soluzione. Grazie!
— pipwerks,
7
Una nota per quelle persone che usano Sass / Compass. Non puoi impostare "riparato" direttamente nel mixin, quindi per aggiungere riparato aggiungi la proprietàbackground-attachment: fixed
— Kyle Mathews
2
Se vuoi che lo sfondo riempia la finestra o il contenuto (a seconda di quale sia maggiore) utilizza min-height:100%(nei browser compatibili)
— cjk
Sono stato in grado di eseguire il seguente codice usando Compass: @include background (linear-gradient (top, red 0%, blue 100%) fixed);
— mcranston18
Come aggiungerei un terzo colore?
— sbaden,
17

So di essere in ritardo alla festa, ma ecco una risposta più solida.

Tutto quello che devi fare è usare min-height: 100%;piuttosto che height: 100%;e lo sfondo sfumato estenderà l'intera altezza del viewport senza ripetere, anche se il contenuto è scorrevole.

Come questo:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}
— Ricardo Zea
fonte
A meno che tu non abbia bisogno di impostare l'altezza html al 100%, ad esempio se hai bisogno di un piè di pagina appiccicoso
— apieceofbart
15

Ecco cosa ho fatto per risolvere questo problema ... Mostrerà il gradiente per l'intera lunghezza del contenuto, quindi semplicemente il ritorno al colore di sfondo (normalmente l'ultimo colore nel gradiente).

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

Ho provato questo in FireFox 3.6, Safari 4 e Chrome, mantengo il colore di sfondo nel corpo per tutti i browser che per qualche motivo non supportano lo stile del tag HTML.

— John Sanford
fonte
13

L'impostazione html { height: 100%}può provocare il caos con IE. Ecco un esempio (png). Ma sai cosa funziona alla grande? Basta impostare lo sfondo sul <html>tag.

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

Lo sfondo si estende fino in fondo e non si verificano strani comportamenti di scorrimento. Puoi saltare tutte le altre correzioni. E questo è ampiamente supportato. Non ho trovato un browser che non ti consente di applicare uno sfondo al tag html. È un CSS perfettamente valido ed è stato per un po '. :)

— Forza di Giustino
fonte
1
@Lynda Non è un feedback molto utile. Ti dispiacerebbe fornire un caso in cui non funziona?
— Forza Justin,
Scusa per essere vago. Non sono sicuro del motivo per cui non funziona. Nel htmlmio caso è possibile aggiungere una sfumatura ma si interrompe parzialmente nella pagina. L'aggiunta background-attachment:fixedrisolve il problema. L'ho visto accadere su più di un sito ma non sono stato in grado di trovare la causa.
— L84,
Il punto di questa soluzione è che ha funzionato su tutti i browser (nel 2012, a proposito). Ma non indichi ancora di quale browser stai parlando. Se i problemi persistono, prova ad aggiungere html, body { height: 100%; }.
— Forza Justin,
Vero. Succede in Firefox e Chrome (non testato in altri browser) e ho provato l'altezza e varie altre impostazioni senza fortuna (eccetto l'allegato in background). Vabbè, non è un grosso problema e spero che la tua risposta funzioni ancora per la maggior parte. =>
— L84,
Devo ancora ingannare con nessuna ripetizione e risolto.
— MarsAndBack
12

Ci sono molte informazioni parziali in questa pagina, ma non complete. Ecco cosa faccio:

  1. Crea una sfumatura qui: http://www.colorzilla.com/gradient-editor/
  2. Imposta il gradiente su HTML anziché su BODY.
  3. Correggi lo sfondo su HTML con "background-attachment: fixed;"
  4. Disattiva i margini superiore e inferiore di BODY
  5. (facoltativo) Di solito creo un in <DIV id='container'>cui inserisco tutti i miei contenuti

Ecco un esempio:

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

Questo è stato testato con IE, Chrome e Firefox su pagine di varie dimensioni e necessità di scorrimento.

— Rick Smith
fonte
1
Grande! Stavo usando colorzilla e la risposta principale non ha funzionato per me. Questo ha fatto. Grazie! :)
— Filly,
Perché preferisci farlo su HTML, non su BODY?
— sashaikevich,
@sashaikevich Ottima domanda. Non vedo quasi questa risposta da 5 anni, quindi non ricordo affatto. Il motivo per cui l'ho fatto potrebbe non essere ancora applicabile con tutti gli aggiornamenti del browser. Se avessi spostato tutto sul corpo, sarei curioso di sapere se funzionava allo stesso modo.
— Rick Smith,
@RickSmith No, ho disegnato HTML. Ma ho spostato le regole da applicare al corpo proprio ora per verificare, e questo non ha fatto differenza. Forse era una vecchia cosa da browser ...
— sashaikevich,
4

Sporco; forse potresti aggiungere solo un'altezza minima: 100%; nel tag html e body? Questo o almeno imposta un colore di sfondo predefinito che è anche il colore del gradiente finale.

— subv3rsion
fonte
1
Lo sfondo predefinito impostato come colore del gradiente finale sarebbe un'ottima soluzione se il gradiente si interrompesse, ma non si ferma semplicemente si ripete, quindi lo sfondo predefinito sarebbe visibile solo se il gradiente non è supportato.
— JD Isaacks,
2

Ho avuto problemi a far funzionare le risposte qui.
Ho trovato che funzionava meglio per correggere un div a grandezza naturale nel corpo, dargli un indice z negativo e attaccare il gradiente ad esso. 

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

Ecco un esempio completo https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

— morefromalan
fonte
0

Ho usato questo codice CSS e ha funzionato per me:

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

Un'informazione correlata è che puoi creare i tuoi grandi gradienti su http://www.colorzilla.com/gradient-editor/

/ Sten

— Netsi1964
fonte
-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
fonte
1
Aggiungi alcune spiegazioni sugli aspetti chiave della tua soluzione.
— Rachcha,
-1

questo è quello che ho fatto:

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

prima che facessi galleggiare il corpo, c'era uno spazio in alto e mostrava il colore di sfondo di html. se rimuovo bgcolor di html, quando scorro verso il basso, il gradiente viene tagliato. così ho fatto galleggiare il corpo e ho impostato la sua posizione su relativa e la larghezza al 100%. ha funzionato su Safari, Chrome, Firefox, Opera, Internet Expl .. oh aspetta. : P

Che cosa ne pensate?

— grizzy
fonte
-4

invece del 100% aggiungo solo un po 'di pixxel ottenuto questo ora e funziona per l'intera pagina senza gap:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }
— LEVIGATRICE
fonte
3
che dire di pagine con> 1420 px di altezza?
— veritas
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.