soy Kseso y esto EsCSS

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 ✎ 7
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í.

avatar del Editor del blog

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