css
27

Escrito por

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.

RELACIONADOS 5 pseudoselectores CSS que quizás no conocías
Manz

27 comentarios

Federico
6

Just for the record, es la especificación de CSS y no la de HTML la que habla sobre cascada y como una regla reemplaza a otra según el orden de aparición.

dani
8

hola este como sabes mucho de esto kisiera preguntarte como hacr para colocar el nik en colores pero aparte con fondo de solor tambien....?!*

Angel Díaz
9

Hola, yo lo he intentado así y no me chusca, te explico: Quiero dos fondos (uno el de la parte de arriba del blog, el naranja) y otro un muñeco chorra fijo en la parte de abajo a la derecha. Si pongo el muñeco en html y bajo hasta abajo de la página (nunca se ve antes) se le ven los pies, pero el resto del muñeco lo tapa el color gris. ¿Alguna idea? Si necesitas una demostración dime y te la mando. Socorroooooooooooooooo!!!

deivis
13

quieron q me alluden... alguie q sea amable.... porfavorr agregem q importa q sean chamo o chamas... solo quiero q me ayuden a poner el fondo a color

GORKA
15

PARA COLOCARLE EL FONDO A TU NOMBRE DEL MSN PRIMERO DEBES TENER EL MSN LIVE PLUS... VAS A OPCIONES Y DAS CLIK EN CODIGO DE FUENTE, SELECCIONAS COLOR DE FONDO Y ELIGES EL Q QUIERAS

Con el Viento
20

No te haces una idea de cuanto me has ayudado con este tip, me estaba por volver loco probando y probando sin resultado. Muchísimas gracias por compartir!!.

Manz
22

Hola Leandro. Quizás hayas realizado mal la comprobación. Acabo de hacer la prueba en Firefox 3.0 y funciona correctamente. Saludos,

EnSER
24

que buena información pero la verdad que no me funciona con Firefox 3.0 :s o algo hice mal pero la verdad que estoy tratando igual se agradece! saludos

Tamara
27

Aunque el truco fue publicado hace tiempo, funciona a la perfección, lo probé en un diseño en Wordpress y se ve tanto en IE como Firefox (luego probaré con otros). Solo me queda decir Gracias!!!! :D

Publica tu opinión