CSS3 HTML5

Los nuevos estándares para el diseño y desarrollo web y Móvil

Capacitación HTML5

La propiedad background-size de CSS3

| Deja tu comentario

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;

¿Un ejemplo completo aplicado a una clase?

.miclase
{background:url(imagen.png);
background-size:100px 150px;
background-repeat:no-repeat;}

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.

Si queremos saber más sobre como aplicar estas propiedades encontraremos ayuda en el W3C.

¿Qué navegadores la soportan? La lista es bastante alentadora: Internet Explorer 9+, Firefox 4+, Google Chrome, Safari 5+ y Opera.

Si quieres aprender más sobre CSS3, puedes ponerte en contacto con nosotros.

Autor: Damián

Escribió cuatro libros, relacionados con sistemas operativos, hardware y desarrollo web, entre ellos se destaca Webmaster Profesional (editado en el año 2009) y HTML 5 – Entienda el cambio, aproveche su potencial lanzado en el 2011 en formato papel y en el 2012 en versión ebook. Se ha desempeñado como editor de libros relacionados con informática. Ha realizado trabajos de edición en la revista Users Digital Design, para la cual participa también escribiendo notas sobre diseño y desarrollo web. Ha colaborado como autor en la revista Dr. Max, Phone Users y en diversas colecciones de fascículos (Universo PC y 1000 Ideas PC, entre otras). Escribe contenidos para diversos medios online, incluyendo el sitio RedUSERS.com. Es consultor y especialista en desarrollo web, con amplio conocimiento en HTML, CSS, AJAX, PHP y Bases de datos. En la actualidad se destaca su trabajo en la preparación de contenidos relacionados con CSS3 y HTML5. Es profesor y dicta curso de HTML5 y clases en la Carrera de Programador Web en el Instituto IT Master Professional Training, en Buenos Aires (Argentina).

Deja un comentario

Es requirido que se compelte.*.