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

Modelo de tarjetas con CSS

Modelo de tarjetas con CSS

Css3 Spinners

Css3 Spinners

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

Seleccionar rangos de elementos con CSS

Seleccionar rangos de elementos con CSS

A veces puede hacerse necesario seleccionar un rango de datos mostrados y es de casi obligatorio demarcar esta región seleccionada lo cual puede hacerse con CSS.

Andrés Cruz 27-07-2015

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Se explica cómo crear un botones de tipo hamburguesa animado con CSS, HTML y una simple función de JavaScript, los botones se convierten una vez clickeados en flechas y/o X según sea el caso.

Andrés Cruz 09-08-2017

¿Cómo usar las Variables en LESS CSS?

¿Cómo usar las Variables en LESS CSS?

Las variables permiten especificar los valores utilizados en un solo lugar y poder utilizarlos a lo largo de la Hoja de Estilo.

Andrés Cruz 12-09-2013