Cómo redimensionar la imagen de fondo de un elemento en CSS3
Para redimensionar una imagen de utilizamos la propiedad con
el nombre genérico de
background-size aunque según el navegador utilizado el
nombre cambia:
Así tenemos
para:
Firefox 3.6:
-moz-background-size
Opera 9.5: -o-background-size
Google Chrome y Safari: -webkit-background-size
Konqueror 3.5.4: -khtml-background-size
Nos permite establecer la dimensión de la imagen a usar como
fondo y admite dos valores, el ancho y el alto, tanto en pixeles como en
porcentajes.
También, hay otros valores que podemos usar como auto,
contain y cover que establecen la relación ancho/alto a mantener.
Ejemplos
Usaremos una imagen que tiene tiene 200x158 pixeles y la
aplicaremos como fondo a un DIV al que le daremeos una dimensión de 300x300.
Agregado el estilo, podríamos tener este código:
Eso es todo.
-->
y se verá así:
Como la imagen de fondo es pequeña, por defecto, no alcanza
a cubrir el total del rectángulo así que, le agregaremos la nueva propiedad con
valores de 100% tanto para el ancho como para el alto:
background-size: 100% 100%;
Y veríamos esto:
Ahora, hagamos lo mismo pero, con valores del 50% para el
ancho en un caso y para el alto en el otro:
background-size: 100% 50%;
Se verá así:
background-size: 50% 100%;
Ahora un ejemplo del uso de "contain" y de "cover"
background-size: contain;
background-size: cover;
Y veríamos esto en Firefox solamente porque al parecer, esos
valores aún no son soportados correctamente por los otros navegadores.
Eso es todo.
-->
View My Stats