Fondos con CSS3 Backgrounds

La propiedad CSS background-size especifica el tamaño de la imagen del fondo.

Sintaxis

background-size: x y;
  • x determina la dimensión horizontal (píxeles, em, auto, porcentaje %, etc.),
  • y determina la dimensión vertical (píxeles, em, auto, porcentaje %, etc.)
    • Valores posibles

      • Dimensiones: por ejemplo, «px» o «%«: especifica la altura o la anchura de la imagen.
      • «cover«: obligará a cubrir toda el área sin distorsionar la imagen. Incluso recortarla.
      • «contain«: obligará a que la imagen no se extienda más allá del elemento sin distorsionarla.

      Fondo que ocupa todo el espacio del elemento

      CSS3 Background-Size

      Código fuente:

      div { background-image:url(soif.jpg); background-size: 540px 360px;}

      Fondo que ocupa el 30% del ancho del bloque con una repetición.

      CSS3 Background-Size

      Código fuente:

      div { background-image:url(soif.jpg); background-size: 30% 30%;}

      Demostraciones

      «Fondo completo» sin distorsión

      Con el valor background-size: cover, el fondo «cubre» todo el fondo en el mejor de los casos.

      Un tutorial que explica esta técnica con más detalle (entre otras): Creación de un fondo inteligente y extensible

      Fondo CSS-tamaño portada

      html { margin:0; padding:0; background: url(image/bg.jpg) no-repeat center center fixed; background-size: cover; }

      Demostraciones

      Soporte

      Browsers Versiones
      Internet Explorer Internet Explorer 9+
      Firefox Firefox 3.6+
      Cromo Cromo 3+
      Safari Safari 3+
      Opera Opera 9.5+

      El prefijo -moz-, -webkit-, -ms- o -o- puede ser necesario para los navegadores que utilicen versiones anteriores a esta propiedad.

Deja una respuesta

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