¡Ojo! Hago directos en Twitch sobre desarrollo web, ¿Te apuntas? ManzDev 
CSS: Dos fondos en pocos segundos
Escrito por J. Román Hernández Martín
Existe un problema con el que se suelen topar los diseñadores de páginas webs, y este es el de incluir dos fondos en una misma página web. Veamos como podríamos hacerlo sin tocar el código HTML, sólo con la hoja de estilos CSS:
Pongamos como ejemplo que el diseñador tiene una página con un gradiente de fondo (grad.png):
body {
background : url(grad.png) repeat-y top left;
}
Lo primero que se le puede ocurrir es añadir varios elementos background, uno con cada fondo:
body {
background : url(grad.png) repeat-y top left;
background : url(fondo2.png) repeat-y top right;
}
El problema de esta opción es que, según la especificación CSS, la página sólo tendrá el último fondo especificado, ya que sobreescribe al anterior.
¿Cuál podría ser la solución entonces? Fácil, usamos la etiqueta HTML para setear una imagen de fondo y la etiqueta BODY para solapar otro encima:
html {
background : url(grad.png) repeat-y top left;
}
body {
background : url(fondo2.png) repeat-y top right;
}
Aunque con capas se puede hacer prácticamente cualquier cosa, esta es una buena solución para salir del paso en pocos segundos, sin tocar el código HTML.
