todas tipos texto son principales para las etiquetas ejemplos cuales atributos html css

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



tipos de etiquetas html (2)

http://jsfiddle.net/julien_c/GmAL4/

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

Sin embargo, si aplica un fondo CSS a html y body , el fondo de body no ocupa toda la página .

¿Es esta discrepancia el comportamiento esperado?

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

Este es el comportamiento correcto . 1 En modo estándar , body , así como html , no ocupa inmediatamente toda la altura de la ventana gráfica, aunque así aparece cuando solo aplica un fondo a la última. De hecho, el elemento html tomará el fondo del body si no le da su propio fondo, y html lo pasará a la ventana gráfica:

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 se dimensionan y colocan en relación con el elemento raíz como si estuvieran pintadas solo para ese elemento. (En otras palabras, el área de posicionamiento de fondo se determina como para el elemento raíz.) Si el valor ''color de fondo'' de la raíz es ''transparente'', el color de fondo del lienzo depende de AU. 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 elemento HTML HTML o un elemento html XHTML: si el valor calculado de ''background-image'' en el elemento raíz es ''none'' y su ''background-color'' es ''transparent'', los agentes de usuario deben en su lugar propagar los valores calculados de las propiedades de fondo del primer elemento hijo del body HTML BODY o XHTML de ese elemento. Los valores utilizados de las propiedades de fondo de ese elemento BODY son sus valores iniciales, y los valores propagados se tratan como si se especificaran en el elemento raíz. Se recomienda que los autores de documentos HTML especifiquen el fondo del lienzo para el elemento BODY lugar del elemento HTML .

Sin embargo, puedes superponer cualquier imagen de fondo sobre un color de fondo en un solo elemento ( html o body ), sin tener que depender de dos elementos: simplemente utiliza background-color y background-image o combínalos en taquigrafía de background propiedad:

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

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

  • En CSS2, aquí es donde el diseño de ambos elementos es útil: simplemente establece una imagen de fondo en html y otra imagen en el body que deseas superponer sobre la primera. Para garantizar que la imagen de fondo en el body muestre a la altura total de la ventana gráfica, también debe aplicar height y height min-height respectivamente:

    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 tiene que especificar la height y la height min-height para html y body respectivamente es porque ningún elemento tiene una altura intrínseca. Ambos son height: auto por defecto. Es la ventana que tiene 100% de altura, por lo que la height: 100% se toma de la ventana gráfica y luego se aplica al body como 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 / height - min-height ):

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

    La única advertencia es que en un solo fondo de varias capas, solo la capa inferior puede tener un color de fondo. Puede ver en este ejemplo que falta el valor transparent de 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á usar el método CSS2, que es compatible con IE7.

Mis comentarios en esta otra respuesta explican, con un fiddle acompaña, cómo el body está realmente desfasado de html por los márgenes predeterminados, a pesar de que parece que está siendo rellenado, de nuevo debido a este fenómeno aparentemente extraño.

1 Esto puede tener sus raíces en la configuración de los atributos HTML background y bgcolor del body hace que el atributo de fondo se aplique a toda la ventana gráfica. Más sobre eso here .