Multiples fondos en css..peeero...
3 seguidores
Hola a todos, quiero imitar una hoja arrancada para maquetar unas noticias en una web y necesito que el div de turno tenga fondo blanco pero que además abajo tenga un png repetido en horizontal simulando una hoja arrancada.
Yo he utilizado esto:
background: url(../imgs/bg_roto.png) repeat-x #fff;
background-position: bottom;
...y el fondo es blanco pero por los huecos que deja el png tambien se ve blanco y necesito que se vea transparente.
¿Existe alguna manera de mover ese fondo de color para que no se quede debajo de el png?
Estoy trabajando con joomla y no me permite añadir divs extras ni tampoco celdas de tabla ni nada por el estilo (creo).
No se si me he expresado con claridad
Gracias de antemano y un saludo
sararow
Justo lo que iba a proponer, el pseudo elemento :after es sin duda lo más limpio y que te permite hacer lo que propones.
fakito
La imágen de fondo siempre va a quedar dentro del elemento, así que las partes transparentes van a dejar ver el color de fondo que le hayas puesto.
Para hacer lo que quieres, dependiendo de la estructura que tengas en el HTML, puedes usar el pseudo-elemento :after del elemento padre o el :before del siguiente elemento para colocar la imágen de fondo.