La propiedad background-size, incorporada a partir de CSS3, nos resultará muy útil para trabajar con fondos.
Lo que nos permite es indicar el tamaño de la imagen de fondo, estableciendo ancho y alto de la misma de la siguiente forma: background-size:300px 200px;
Ejemplo con código
A continuación veremos un ejemplo aplicado a una clase.
.caja{
width: 100px;
height: 150px;
background:url("imagen.png");
background-size:100px 150px;
background-repeat:no-repeat;
}El código CSS de este ejemplo se aplica a los elementos que tengan asignada la clase caja, a la que le especificamos un ancho de 100px y un alto de 150px.
Para simplificar este ejemplo tenemos la imagen, cuyo nombre es imagen.png, en la misma carpeta que los estilos pero se podría ubicar en la ruta que definamos desde la línea 4 del código.
Luego con background-size establecemos ancho y alto de la imagen. Para finalizar establecemos que la imagen no se repita, empleando background-repeat:no repeat.
Más sobre background-size
Vale decir que esta propiedad también puede recibir medidas especificadas en porcentaje (ancho y alto), que estarán relacionados con el elemento padre que contiene la imagen. Siempre explico al dar clases que hay que tener cuidado con el uso de estas propiedades, porque si usamos medidas porcentuales puede verse deformada la imagen de fondo.
También contamos con la posibilidad de aplicar los valores cover o contain para escalar la imagen ocupando el máximo posible del área, manteniendo el aspect ratio.
En conclusión
A la hora de maquetar sitios Web compatibles con diferentes dispositivos es muy común emplear background-size. La introducción de esta característica ha traído importantes beneficios en el maquetado responsive.
Si queremos saber más sobre como aplicar estas propiedades encontraremos ayuda en el W3C.
En la actualidad se está trabajando sobre CSS Backgrounds and Borders Module Level 3. Lo cual indica que estas características se encuentran en constante evolución.
Si te interesa saber más sobre CSS dejame un comentario o escribeme un mensaje.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta