Questo è correct behavior. body non occupa immediatamente l'intera altezza del viewport, anche se appare così quando si applica solo uno sfondo a quest'ultimo. In realtà, l'elemento html assumerà sullo sfondo di body se non si dà il proprio background e html passerà questo al viewport:
Lo sfondo dell'elemento radice diventa lo sfondo di la tela e la sua area di pittura di sfondo si estendono fino a coprire l'intera tela, sebbene qualsiasi immagine sia dimensionata e posizionata rispetto all'elemento radice come se fossero state dipinte per quell'elemento da solo. (In altre parole, l'area di posizionamento dello sfondo è determinata come per l'elemento radice.) Se il valore 'background-color' della radice è 'trasparente', il colore di sfondo della tela è dipendente da UA. L'elemento radice non dipinge di nuovo questo sfondo, vale a dire, il valore utilizzato del suo sfondo è trasparente.
Per i documenti il cui elemento principale è un elemento HTML HTML o un elemento XHTML html: se il valore calcolato di 'background-image' sull'elemento radice è 'none' e il suo 'background-color' è 'trasparente', i programmi utente devono invece propagare i valori calcolati delle proprietà dello sfondo dal primo elemento HTML BODY o XHTML body elemento di quell'elemento. I valori utilizzati delle proprietà dello sfondo dell'elemento BODY sono i relativi valori iniziali e i valori propagati vengono trattati come se fossero specificati nell'elemento radice. Si consiglia agli autori di documenti HTML di specificare lo sfondo del canvas per l'elemento BODY anziché l'elemento HTML.
Detto questo, però, è possibile sovrapporre qualsiasi immagine di sfondo su un colore di sfondo su un singolo elemento (sia html o body), senza dover fare affidamento su due elementi - è sufficiente utilizzare background-color e background-image o combinarli in background proprietà stenografica:
body {
background: #ddd url(background.png) center top no-repeat;
}
Se si desidera combinare due immagini di sfondo, è necessario fare affidamento su più ambiti di provenienza.Ci sono principalmente due giorni per farlo:
Nei CSS2, questo è dove lo styling entrambi gli elementi viene in aiuto: è sufficiente impostare un'immagine di sfondo per html e un'altra immagine di body cui si desidera sovrapporre rispetto al primo. Per garantire l'immagine di sfondo su body display a tutta altezza finestra, è necessario applicare height e min-height rispettivamente così:
html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}
Per inciso, il motivo per cui è necessario specificare height e min-height a html e body rispettivamente è perché nessuno dei due elementi ha un'altezza intrinseca. Entrambi sono height: auto per impostazione predefinita. È il viewport che ha il 100% di altezza, quindi height: 100% viene prelevato dal viewport, quindi applicato a body come minimo per consentire lo scorrimento del contenuto.
in CSS3, la sintassi è stato esteso in modo da poter declare multiple background values in a single property, eliminando la necessità di applicare sfondi a più elementi (o regolare height/min-height):
body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}
L'unica avvertenza è che in un solo sfondo a più livelli, solo il livello più in basso può avere un colore di sfondo. In questo esempio è possibile vedere che il valore transparent non è presente nel livello superiore.
E non preoccuparti: il comportamento sopra specificato con valori di propagazione dello sfondo funziona esattamente allo stesso modo anche se utilizzi sfondi a più livelli.
Se è necessario supportare i browser più vecchi, però, avrete bisogno di andare con il metodo CSS2, che è sostenuto tutta la strada fino a IE7.
I miei commenti sotto this other answer spiegano, con un accompagnamento fiddle, come body è in realtà compensata da html da margini di default, anche se sembra che sia in corso riempito fuori invece, ancora una volta a causa di questo apparentemente strano fenomeno.
questo può avere le sue radici nella impostazione del HTML background e bgcolor attributi body causando sfondo attribuiscono da applicare a tutta la finestra. Maggiori informazioni su questo here.
possibile duplicato di [Qual è la differenza tra l'applicazione delle regole css in html rispetto al corpo?] (Http: // stackoverflow.it/questions/6739601/what-is-the-difference-between-application-css-rules-to-html-comparison-to-body) –