Xitrus está alojado en:
Es un tópico el no poder ajustar fácilmente el tamaño de una imagen de fondo, pero con CSS3 ya está más que solucionado, ya que con background-size podemos configurar que tamaño tendrá la imagen de fondo.
El funcionamiento es simple, primero establecemos los parámetros del fondo (como color, imagen, repetición...) y posteriormente añadimos la propiedad background-size y establecemos el ancho y el alto como aparece debajo.
Aunque posteriormente os explicaré más al detalle los ejemplos el funcionamiento de esta propiedad es similar a la de una imagen que está dentro de un contenedor que no cambia de tamaño.
Voy a destacar el segundo ejemplo que nos sirve para establecer una imagen de fondo que se adapte totalmente a la página (cosa que antiguamente se tenía que hacer con una capa con posición absoluta y en definitiva era un poco chapuza).
Esta propiedad admite que le especifiquemos solo el ancho (y así mantendrá las proporciones) o el ancho y el alto por separado.
Además podemos establecer el tamaño en píxeles o en porcentajes, lo que nos permite hacer que el fondo se adapte perfectamente a nuestras necesidades.
En el ejemplo anterior establecemos que el ancho y el alto sea 100%, por lo que se adaptará perfectamente y si pasamos por encima podremos ver el cambio (al redimensionarse el elemento).
Y en el ejemplo siguiente establecemos que el ancho únicamente sea del 100%, por lo que el alto se adaptará sin perder la proporción.
Esta propiedad no solo sirve para establecer el tamaño de una sola imagen, sino también puede servirnos para una textura, por ejemplo o cualquier imagen que se repita.
En este caso se adaptará la primera imagen, con las proporciones que especifiquemos y las demás harán lo mismo.
En este ejemplo primero tenemos la propiedad background-size que establece que la imagen tendrá 100px de ancho y al pasar por encima tendrá 50px.
Xitrus está alojado en:
