Aplicar un fondo a <html> y/o <body>

$("#toggle").click(function(){
    $("html").toggleClass("bg");
});

html.bg {
    background: blue;
}

body {
    background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html class="bg">
<head>
</head>

<body>
    Test
    <br>
    <button id="toggle">Toggle HTML background</button>
</body>
</html>

Expandir fragmento

Descubrí que si aplicas un fondo CSS body, ocupa toda la página (sin importar cuál bodysea la altura o el ancho real).

Sin embargo, si aplica un fondo CSS a ambos htmly body, el fondo body no ocupa toda la página .

¿Es esta discrepancia el comportamiento esperado?

¿Cómo haría para superponer dos fondos de pantalla completa (por ejemplo, un color de fondo y una imagen semitransparente?)

Jun 08 '12 17:06 julien_c

Éste es el comportamiento correcto . ¹ En el modo estándar , body, así comohtml , no ocupan inmediatamente toda la altura de la ventana gráfica, aunque así lo parezca cuando solo se aplica un fondo a esta última. De hecho, el htmlelemento tomará el fondo bodysi no le das su propio fondo, y htmllo pasará al lienzo:

El fondo del elemento raíz se convierte en el fondo del lienzo y su área de pintura de fondo se extiende para cubrir todo el lienzo, aunque las imágenes tienen un tamaño y una ubicación en relación con el elemento raíz como si estuvieran pintadas solo para ese elemento. (En otras palabras, el área de posicionamiento del fondo se determina como para el elemento raíz). Si el valor de 'color de fondo' de la raíz es 'transparente', el color de fondo del lienzo depende de UA. El elemento raíz no vuelve a pintar este fondo, es decir, el valor utilizado de su fondo es transparente.

Para documentos cuyo elemento raíz es un HTMLelemento HTML o un htmlelemento XHTML: si el valor calculado de 'imagen de fondo' en el elemento raíz es 'ninguno' y su 'color de fondo' es 'transparente', los agentes de usuario deben propagar el valores calculados de las propiedades de fondo del primer elemento secundario HTML BODYo XHTML de ese bodyelemento. Los valores utilizados de BODYlas propiedades de fondo de ese elemento son sus valores iniciales y los valores propagados se tratan como si estuvieran especificados en el elemento raíz. Se recomienda que los autores de documentos HTML especifiquen el fondo del lienzo para el BODYelemento en lugar del HTMLelemento.

Dicho esto, sin embargo, puedes superponer cualquier imagen de fondo sobre un color de fondo en un solo elemento (ya sea htmlo body), sin tener que depender de dos elementos; simplemente úsalos background-coloro background-imagecombínalos en la backgroundpropiedad abreviada:

body {
    background: #ddd url(background.png) center top no-repeat;
}

Si desea combinar dos imágenes de fondo , debe confiar en varios fondos. Hay principalmente dos días para hacer esto:

En CSS2, aquí es donde resulta útil diseñar ambos elementos: simplemente establezca una imagen de fondo htmly otra imagen bodyque desee superponer sobre la primera. Para garantizar que la imagen de fondo bodyse muestre a la altura completa de la ventana gráfica, también debe aplicar heighty min-heightrespectivamente:
```
html {
    height: 100%;
    background: #ddd url(background1.png) repeat;
}

body {
    min-height: 100%;
    background: transparent url(background2.png) center top no-repeat;
}
```
Por cierto, la razón por la que debe especificar heighty min-heighta htmly bodyrespectivamente es porque ninguno de los elementos tiene una altura intrínseca. Ambos son height: autopor defecto. Es la ventana gráfica la que tiene 100% de altura, por lo que height: 100%se toma de la ventana gráfica y luego se aplica bodycomo mínimo para permitir el desplazamiento del contenido.
En CSS3, la sintaxis se ha ampliado para que pueda declarar múltiples valores de fondo en una sola propiedad , eliminando la necesidad de aplicar fondos a múltiples elementos (o ajustar height/ min-height):
```
body {
    background: url(background2.png) center top no-repeat, 
                #ddd url(background1.png) repeat;
}
```
La única advertencia es que en un único fondo de varias capas, sólo la capa inferior puede tener un color de fondo. Puede ver en este ejemplo que transparentfalta el valor en la capa superior.

Y no se preocupe: el comportamiento especificado anteriormente con la propagación de valores de fondo funciona exactamente igual incluso si utiliza fondos de varias capas.

Sin embargo, si necesita admitir navegadores más antiguos, deberá utilizar el método CSS2, que es compatible desde IE7.

Mis comentarios en esta otra respuesta explican, con un violín adjunto , cómo bodyen realidad se compensan htmllos márgenes predeterminados a pesar de que parece que se están completando, nuevamente debido a este fenómeno aparentemente extraño.

¹ _{Esto puede tener su origen en la configuración del HTML backgroundy bgcolorlos atributos para bodyhacer que el atributo de fondo se aplique a toda la ventana gráfica. Más sobre eso aquí .}

Jun 08 '2012 11:06 BoltClock

Sugiera leer esto:

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

Esencialmente, en ausencia de un backgroundelemento html, body backgroundcubrirá la página. Si hay un backgroundelemento html, se body backgroundcomporta como cualquier otro elemento.

Jan 30 '2018 20:01 Emmanuel Osimosu