La propiedad background-size de CSS3

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.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.