Seleccionar página

Para conseguir que una imagen de fondo se adapte al tamaño de la caja contenedora podemos usar una de las nuevas propiedades que CSS3 nos proporciona.

Si tenemos el siguiente código en nuestro archivo .html:


<div id="contianer">...</div>

Los estilos a aplicar en el archivo .css para que la imagen de fondo se ajuste al ancho de la caja son los siguientes


#container {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-image: url("iamge.jpg");
background-size: cover;
height: 400px;
width: 90%;
margin: 0 auto;
}

En realidad, el código que nos interesa son solo los 5 primeros atributos, que son los que afectan a la imagen y nos facilitan su adaptación.

Como podéis comprobar, CSS3 es una herramienta indispensable a la hora de crear nuestras webs.