lunes, 18 de febrero de 2013

Cambiar tamaño de background con background-size CSS3


background-size es una nueva propiedad de la versión CSS3 que permite modificar el tamaño de una imagen establecida como background.

Esta propiedad es compatible con  IE9+, Firefox 4+, Opera, Chrome y Safari 5+.

background-size  -> Para todos los navegadores compatibles.
-moz-background-size -> Para versiones más antiguas de Firefox.
-webkit-background-size -> Para versiones de crhome y safari
-o-background-size -> Para versiones de Opera

background-size: length | percentage | cover | contain <- Sólo una de las opciones

· length -> Establece la altura y la anchura de la imagen de fondo. El primer valor establece el ancho, el segundo valor define la altura. Si sólo se da un valor, el segundo está en "auto"

· percentage -> Establece el alto y el ancho de la imagen de fondo en porcentaje del elemento padre. El primer valor establece el ancho, el segundo valor define la altura. Si sólo se da un valor, el segundo está en "auto"

· cover ->  La escala de la imagen de fondo a de ser tan grande como sea posible para que el área de fondo esté completamente cubierta por la imagen de fondo. Algunas partes de la imagen de fondo no puede ser vista en el posicionamiento dentro de la zona de fondo.

· contain ->  Escala de la imagen al tamaño más grande de tal manera que tanto su anchura y su altura puede caber dentro del área de contenido.

Prueba a modificar el background del siguiente div ...


background:
width image:
height image:
repeat image: