Background 100%. 2 técnicas. Al viejo estilo 2.1 y el actual Css3

Background 100%. 2 técnicas. Al viejo estilo 2.1 y el actual Css3

Por Kseso ✎ 6
Img: Rafael Castillejo

Una de las cuestiones que cada 2x3 es objeto de consulta en foros y páginas de ayuda sobre Css es cómo lograr que una imagen utilizada como fondo (background) ocupe toda la caja sin distorsionarse ni dejando espacio sin cubrir.
A continuación dos formas de lograrlo, una a la vieja manera con Css2.1 y otra basada en las nuevas propiedades background de Css3.

El método de la vieja escuela

Css2.1 no provee herramientas para modificar el tamaño de una imagen colocada con la propiedad background-image (o con su forma acortada). Así que la solucción pasa por colocarla en el html vía la etiqueta img y hacer uso de otras propiedades que sí se encuentran en el nivel 2 de Css.

Todo pasa por colocar nada más abrir el body nuestra imagen, dentro de un contenedor para evitar que si utilizas el doctype xHtml strict y validas te salte un error por tener la imagen como hija directa del body.

<body> <div id="fondo-imag"> <img src="imagen.jpg" alt="una imagen" /> </div> <!-- Resto de la página -->

A continuación los estilos, comenzando con mi minireset preferido y preparando el campo (html y body) para que no haya sorpresas desagradables:

* { margin: 0; padding: 0; border: 0; position: relative; } html, body { width: 100%; min-height: 100%; height: auto !important; height: 100%; }

Y a continuación los propios de la imagen, y su contenedor, para lograr que ocupe toda la ventana:

#fondo-imag { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #fondo-imag img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Ver Ejemplo.

Nota: el marco no cubierto en el ejemplo es debido al frame en que se muestran las realizaciones en jsfiddle.net

Fíjate en la relación de tamaños (anchuras/alturas) y los valores numéricos del posicionamiento (top/left...) No son casuales, así como en la propiedad position de la imagen y su contenedor.

Funciona perfecto, eso sí, a costa de añadir un div y una imagen en el html siendo sólo un recurso estético. Y sin perder de vista que el css necesario, sin ser excesivo, necesita declaraciones en tres selectores.
Si utilizas este método deberías tener presente el tamaño de la imagen. Demasiado pequeña y perderás calidad en ventanas grandes. Demasiado grande y su peso aumentará. También es importante que sopeses la relación ancho/alto.

El simple y moderno Css3: background-size: cover

Simple, sencillo, semántico y...

body { width: 100%; height: 100%; background: url('imagen.jpg') 50% 50% no-repeat; background-size: cover; }

Ver ejemplo

Nota: el marco no cubierto en el ejemplo es debido al frame en que se muestran las realizaciones en jsfiddle.net

Y eso es todo, amigos. Código simple, sencillo, semántico y... Css3. Esto es, a día de hoy necesitas añadir todos y cada uno de los prefijos privativos, además de no olvidar qué navegadores y sus versiones quedan excluidos.

Ahora ya puedes elegir. Opciones tienes.

Css3 background

En lo que preparo mi guía sobre el documento del W3c "CSS Backgrounds and Borders Module Level 3" recién publicado (Editor's Draft 5 Abril 2012) puedes consultarlo aquí.

Amigos que hacen cosas

Dronic Servicios AéreosDronic Servicios Aéreos
Dronic Servicios Aéreos: imágenes aéreas de calidad

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 6

  1. Amigo, gracias por compartir los conocimientos, Tengo el problema que en Internet esplorer 11 la imagen de fondo no se me redimenciona, si achico la imagen para probarlo, el fondo hace lo mismo, el moz y el webkit si me funciona, pero con el explorer no se que hacer. Nuevamente gracias por su ayuda.

    ResponderEliminar
    Respuestas
    1. Lo siento, Carlos. Pero sin tener acceso a la realización que da problemas es imposible hallar la raíz del malfuncionamiento y mucho más aún proponer soluciones.

      Descarta que no estés utilizando propiedades o valores Css no soportadas.
      canisue.com o cssvalues.com te serán de ayuda.

      Un saludo

      Eliminar
  2. Me ha funcionado, mil gracias!! :-) Un saludo cordial.

    ResponderEliminar
  3. gracias me fue de ayuda el de css3

    ResponderEliminar
  4. Hola,

    En caso de wordpress o similares, donde al subir una imagen te queda un codigo similar a este:

    < im g src="http:// www.sitio-y-nombre-dela-imagen . p ng" al t = "no mbre-imagen " wid th="199" height="201" c l a s s = " alignright size-full w p-i m a ge- 919" />


    Podría editarlo para que fuera adaptable según dispositivo? (en dispositivos pequeños se aplasta horizontalmente hasta desaparecer)

    Si es asi como seria el codigo? (los espacios sobrantes son para que me permita publicar)

    ResponderEliminar
    Respuestas
    1. Hola Marc
      No conozco lo suficiente WP ni la plantilla que estés usando como para poder evaluar el significado y finalidad de las clases que añade a la imagen.
      Tampoco las dimensiones reales de la imagen.

      Así que con toda la temeridad que ello conlleva me arriesgaré:

      Si deseas usar esa imagen con el método "vieja escuela" deberías prescindir de todos los atributos (y sus valores) que pudieran interferir con las declaraciones css necesarias.

      Si es con el "nuevo" vía background no importaría ya que sólo necesitas la dirección o url a la imagen.

      Pero en todo lo anterior has de tener presente el tamaño y grado de comprensión de la imagen ("calidad") para evitar en según qué tamaños de viewport y tipo de pantalla (dispositivos de alta resolución y densidad de px) se vaya a visualizar.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap