Background CSS3

Background CSS3

En esta entrada vamos a ver Background-size mediante varios ejemplos muy sencillos donde podremos darnos cuenta claramente de las nuevas posibilidades que nos ofrece background con esta versión de CSS3.

Entre las diferencias más significativas de Background podemos destacar:

- La posibilidad de colocar varias imágenes de background.

- El tamaño de nuestro fondo.

- La posición de estas imágenes.

Primero aplicaremos unos estilos a la etiqueta DIV para los ejemplos.

Incluiré para el color del borde, colores hsla, otra nueva modalidad de asignar colores con CSS3.

div {
     width:600px;
     height:350px;
     border: 5px solid hsla(30, 8%, 5%, .5);
}

Background-size

Ahora añadiremos a nuestro background una imagen que sus medidas no sean múltiplos de las de nuestro DIV. De esta forma podremos observar mucho mejor el ejemplo.

Esto ya deberíamos saberlo, pero bueno, lo hacemos de la siguiente forma:

div {
     width:600px;
     height:350px;
     border: 5px solid hsla(30, 8%, 5%, .5);

     background-image:url(azulejo-pequeno.png);
     /*Tamaño de la imagen 125 x 125*/
}

Quedando nuestro ejemplo de la siguiente forma

Como podemos observar la imagen de los azulejos no es múltiplo de nuestro DIV y los azulejos son cortados en la parte inferior. Pudiendo ser cortados también en la parte de la derecha.

Para evitar esto que nos ha sucedido, deberíamos emplear Background-size asignándole dos valores, uno para el ancho y otro para el alto. No podemos olvidar si queremos mantener las proporciones en la imagen o ratio dar uno de los dos valores auto y que se redimensione en función a su otro valor en px. Si dejamos el segundo valor en blanco el navegador lo interpretará como auto también.

De esta forma es mucho más sencillo adaptar nuestra imagen al tamaño del background.

div {
     width:600px;
     height:350px;
     border: 5px solid hsla(30, 8%, 5%, .5);

     background-image:url(azulejo-pequeno.png);
     /*Tamaño de la imagen 125 x 125*/

     background-size: 50px auto;
}

Como podemos observar la imagen de los azulejos se adaptó perfectamente a nuestro DIV sin perder las proporciones y sin que nuestra imagen haya sido cortada por ningún lado.

Como unidad de medida hemos utilizado en esta ocasión px haciendo referencia al tamaño que queremos para nuestra imagen de fondo. También podemos emplear tantos por ciento. Éstos hacen referencia al tamaño del contendor.

Lo entenderemos muy pronto con este ejemplo.

div {
     width:600px;
     height:350px;
     border: 5px solid hsla(30, 8%, 5%, .5);

     background-image:url(azulejo-pequeno.png);
     /*Tamaño de la imagen 125 x 125*/

     /*background-size: 50px auto;*/

     background-size: 50% 100%;
}

Obviamente esta variaciones de tamaños pueden hacer que las proporciones o ratio de nuestra imagen varíen.
No olviden que algunas versiones antiguas de navegadores pueden obligar a utilizar las etiquetas o prefijos -webkit, -moz, etc.

Desde aquí

Puedes descargar un archivo con el código de estos ejemplos. Habrá código comentado para que puedas ir probando uno a uno.

La contraseña para descomprimir es: untitled.es

Background con varias imágenes

Para mi una de las novedades más importantes de CSS3.

Podremos poner varias imágenes de fondo en un mismo elemento empleando background separando éstas por una coma.

Cada una de estas imágenes podrá ser posicionada, repetida y dimensionada. Pudiendo aplicar a éstas las mismas variaciones que cuando trabajamos con una sola imagen.

Vamos con el primer ejemplo

He recortado 2 imágenes más para que lo veamos claramente. Una rana y un saltamontes, las dos imágenes .png, por ahora únicamente las pondré una encima de otra.

Tenemos que tener en cuenta que se muestran en orden inverso a su colocación. Es decir, la imagen de azulejos que tenemos intención que vaya detrás del todo hay que colocarla en nuestro código la última, de la misma forma con las demás.

De una forma parecida a las capas con Photoshop.

Debemos tener mucho cuidado con los navegadores que no soportan este tipo de background, es muy recomendable colocar un estilo background antes del de múltiples imágenes. De esta forma si el navegador no reconoce background para varias imágenes habrá tomado el estilo definido una línea arriba.

div {
    /*Para los navegadores que no soportan varias imágenes*/
    background:url(azulejo-pequeno.png);

   /*En caso de soportar varias imágenes sustituye el estilo por este*/
    background: url(saltamontes.png),
                url(rana.png),
	        url(azulejo-pequeno.png);
}

Bueno, pasamos al ejemplo que seguro que lo entenderemos mucho mejor

div {
     width:600px;
     height:350px;
     border: 5px solid hsla(30, 8%, 5%, .5);
	
     background-size: 50% 100%;
     
     /*Para los navegadores que no soportan varias imágenes*/
     background:url(azulejo-pequeno.png);
	
     /*En caso de soportar varias imágenes sustituye el estilo por este*/
     background: url(saltamontes.png),
                 url(rana.png),
	         url(azulejo-pequeno.png);
}

Como podemos observar la propiedad background-size es aplicada para todas las imágenes.

Ahora añadiremos valores de posicionamiento para colocar nuestra rana y nuestro saltamontes cada uno en un azulejo y al mismo tiempo le vamos a decir que no se repita la imagen.

Estos valores de posicionamiento pueden ser px y tantos por ciento %.

     background:url(saltamontes.png) 0% 5px no-repeat,
	        url(rana.png) 100% 5px no-repeat,
		url(azulejo-pequeno.png);

A saltamontes.png le estamos indicando que se situe en el eje X a 0% y a 5px en el eje Y. De la misma forma pero con otros valores hemos colocado a rana.png.

Ya por último sólo nos falta indicarle el tamaño que deseamos para nuestra rana y para el saltamontes. Por defecto está tomando el que le dimos a los azulejos.

     background-size: 50% 100%;

Podemos indicar un tamaño para cada una de nuestras imágenes de la siguiente forma. El orden para dar estos valores es de arriba hasta abajo en la lista de imágenes y se aplicará directamente en background-size de la siguiente forma.

     background-size: auto, auto, 50% 100%;

Con el valor auto le estamos indicando que tome el valor original de la imagen para saltamontes.png y rana.png

Quedando nuestro ejemplo de esta forma.

Desde aquí

Puedes descargar un archivo con el código de estos ejemplos. Habrá código comentado para que puedas ir probando uno a uno.

La contraseña para descomprimir es: untitled.es

@eneakao


Fundador de Untitled.es ♡ developer ( ) { web; graphic; iOS; } – http://pagarpoquito.com

3 pensamientos en “Background CSS3

  1. Pingback: Background CSS3 | Recursos | Scoop.it

  2. Pingback: Transiciones CSS3 | Untitled.es

  3. Pingback: Curso tutorial de CSS3 con ejemplos descargables | Untitled.es · Tutorial iOS · Objective-C · Desarrollo HTML5 · CSS3

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>