Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas

sábado, 5 de marzo de 2016

Cómo redimensionar la imagen de fondo de un elemento en CSS3

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:


Código de estilo css para el ejemplo a utilizar



y se verá así:

Imagen sin el uso de background-size


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:

Imagen utilizando background-size con 100% de alto y de ancho



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í:

Imagen usando background-size con un alto de 100% y ancho 50%


background-size: 50% 100%;

Imagen usando background-size con un alto de 50% y ancho 100%



Ahora un ejemplo del uso de "contain" y de "cover"

background-size: contain;

Imagen usando background-size con 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.

Imagen usando background-size con cover


Eso es todo.



-->
View My Stats