DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
12-08-2013

Podemos asignar múltiples fondos a un mismo elemento HTML con sólo separar cada una de los valores ('url(ruta-imagen)') por comas (,) de la siguiente forma:

.ejemplo1{
background-image: url(twitter-logo.png), url(facebook-logo.png), url(google-plus-logo.png);
}

Definiendo CSS para cada fondo

Con esto las tres imágenes se superponen, pero hemos logrado el objetivo el cual es mostrar múltiples fondos o background en un mismo elemento; ahora…

Y si queremos aplicarles ciertas reglas a cada uno de los background ya definidos

Es decir por separados; para lograrlo debemos de seguir los mismos pasos; que consisten en separar los valores de los atributos por comas (,):

.ejemplo2{
background-image: url(twitter-logo.png), url(facebook-logo.png), url(google-plus-logo.png);
background-position: 110px 162px, 58px 80px, 0px 0px;
background-repeat: no-repeat;
}

Vemos que de nuevo tenemos un background-image con tres fondos y dos nuevas reglas.

La primera propiedad: background-position indican la posición que tomarán nuestros fondos: "url(facebook-logo.png)" se posiciona en las coordenadas "30px 80px"; es decir el fondo luego de la coma i (donde 1background-image y el background-position.

Para la segunda nueva regla "background-repeat" con el valor "no-repeat" le estamos indicando que NO repita la imagen sobre el elemento ni vertical ni horizontalmente; además de esto podemos ver que dicha propiedad sólo aparece una vez y esta afecta a los tres fondos.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Loader espiral con CSS

Loader espiral con CSS

Referencia de las propiedades CSS más empeladas

Referencia de las propiedades CSS más empeladas

Flat Module con puro CSS

Flat Module con puro CSS

Algunos artículos que te pueden interesar

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017

¿Cómo hacer rotaciones con CSS3?

¿Cómo hacer rotaciones con CSS3?

En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform de CSS3.

Andrés Cruz 07-08-2014

Primeros pasos con las animaciones en CSS

Primeros pasos con las animaciones en CSS

En esta nueva entrada sobre CSS daremos los primero pasos con las animaciones en CSS; veremos como los @keyframes de CSS son fundamentales para las animaciones, entre otras cosas.

Andrés Cruz 12-01-2015