Múltiples imágenes de fondo con CSS3
Múltiples imágenes de fondo con CSS3
Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3.
Con el atributo background-image podemos conseguir que un elemento de la página tenga un fondo de imagen. Esto debemos saberlo, puesto que es algo básico de las hojas de estilo en cascada (CSS).
Una de las nuevas características de CSS 3 consiste en la posibilidad de declarar varios fondos de imagen a un elemento de la página. Lo que antes hemos visto que es posible, creando varios elementos anidados y colocando un fondo en cada uno, se puede hacer en CSS 3 con un solo elemento, al que aplicaremos varios fondos distintos.
El HTML del ejemplo de varias imágenes de fondo sería el siguiente:
<div id=”fondos”>
texto de un único elemento
…
</div>
Ahora veamos el CSS 3 válido para este ejemplo:
<style type=”text/css”>
#fondos{
background: url(fondo3.png) bottom right no-repeat,
url(fondo2.png) center no-repeat,
url(fondo1.gif) center repeat;
width: 300px;
}
</style>
Sólo cabe comentar que las distintas imágenes de fondo se tienen que escribir en la declaración CSS separadas por comas. Además, las imágenes que declaramos se van colocando de modo que la primera aparece sobre las siguientes. Así pues, en esta declaración, fondo1.gif, que está colocada como último fondo, es la que aparece detrás del todo.
-webkit-column-gap: 15px;
-webkit-column-rule: 1px solid #ccc;
-moz-column-rule: 1px solid #ccc;
}
Otra posibilidad para crear un multicolumna será definir simplemente el número de columnas que querríamos incorporar en el texto, por medio del atributo column-count, de esta manera:
.multicolumna5columnas{
-moz-column-count: 5;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid #ccf;
-webkit-column-count: 5;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid #ccf;
}
Especificar el número de columnas es quizás más cómodo, pero en páginas fluidas puede funcionar peor, porque no se sepa con certeza qué anchura va a tener el lugar donde se muestran los textos y por tanto unas veces queden columnas muy anchas y otras muy estrechas.
El sistema de múltiples columnas se está encuentra en estado de borrador y forma parte de un módulo aparte dentro de las especificaciones de CSS 3. Si se desea encontrar más información sobre el tema en la W3C se puede consultar la URL http://www.w3.org/TR/css3-multicol/
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros