CSS3 Backgrounds y sus nuevas propiedades

Css3 nos trae nuevas formas de controlar los background o imágenes de fondo de cajas, div o de sitios web completos, se trata de multiple background images. Que nos va a permitir colocar varias imágenes de fondo, background-size que nos va a permitir personalizar por medio de css el tamaño de la imagen y adaptarla a su contenedor y background-origin que nos va a permitir especificar el posicionamiento de una imagen de acuerdo a su área. En este artículo vamos a ver cómo podemos usar estas propiedades de css3.

Multiples Backgrounds con CSS3

Utilizando CSS3 podemos colocar múltiples imágenes de fondo a un elemento de html podría ser un div. Antes para conseguir esto teníamos que crear una sola composición con todas las imágenes o múltiples divs para conseguir este objetivo, con las nuevas y mejoradas propiedades de background de css3 conseguiremos ajustarlos a la necesidad presentada. Miremos como funciona.

Bueno para entender esto bien, necesitamos conocer la sintaxis.

La declaración de la propiedad es la misma de la anterior versión de css, solo que ahora añadimos múltiples imágenes a la propiedad background-image y la separamos por medio de comas.

Podemos crear composiciones compuestas por varia imágenes y ubicarlas en diferentes posiciones para lograr lo deseado. Ejemplo, vamos a ver un paisaje compuesto por 3 imágenes diferentes pero que vamos a integrar en un solo div utilizando múltiples imágenes de fondos en css3.

Tenemos este resultado:

multiples-fondos-css3

Las posiciones que asignamos a cada imagen dependerán del orden en que tengamos las imágenes, desde la primera hasta la última.

Podemos abreviar este código de css para aplicar múltiples fondos de imágenes de la siguiente forma.

y el resultado sera el mismo.

Background-size con CSS3

Background-size es otra propiedad de CSS3 que viene con el titulo de interesante, por medio de esta propiedad vamos a poder ajustar o escalar nuestro background o imagen de fondo de nuestro sitio web, podemos ajustar el ancho y alto, podemos ajustarla y adaptarla a la resolución de la pantalla del navegador o div contenedor.

en al caso anterior estamos aplicando un tamaño de 400px de ancho, y 635px de alto.

El tamaño tambien lo podemos definir por medio de porcentaje, longitud, cover y contain.

Porcentaje: Establecemos el tamaño de la imagen dependiendo de su del elemento padre. (50%).

Cover: Escala la imagen para el tamaño más pequeño de tal manera que su anchura y su altura puede caber dentro del área de contenido.

Contain: Escala la imagen al tamaño más grande de tal manera que su anchura y su altura puede caber dentro del área de contenido

el resultado seria el siguiente:

background-siza-css3

background size css3

Utilizando el 100% del tamaño de la imagen vamos a tener la opción de que la imagen se redimensione y se adapte al navegador o a la caja que contenga la imagen.

background-origin en CSS3

Esta propiedad nos permite posicionar el background o imagen de fondo a relación del contenido o area de la caja contenedora, podemos hacer que sea relativa al padding de la caja por medio de padding-box, también por medio de el borde de la caja por medio de border-box y también la podemos ubicar relativamente a el contenido de la caja por medio de content-box.

background origin css3
 

 

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo