Cómo hacer una imagen de fondo escalable con CSS

imagen-de-fondo-escalable-con-Css

A veces tenemos una imagen que queremos utilizar como fondo en nuestro blog o página web, diseñamos una bonita imagen en Photoshop y nos hacemos esta pregunta: Bueno, muy bonita, pero ¿cómo pongo esta imagen en el fondo para que no se vea recortada y con un espacio blanco alrededor si alguien usa una pantalla grande? Si alguna vez has creado o has querido crear un sitio web con una imagen estática, seguro que te has hecho esta pregunta.

Yo también. Asá­ que buscando en Google, he encontrado varias formas de hacerlo. Puede hacerse con una llamada jQuery o utilizar técnicas avanzadas de CSS3 que sirven para para jugar con imágenes en distintos rincones de la página, pero todavía no se aplican  (Safari es el único navegador que puede utilizar CSS3 en la actualidad).  Al igual que tech4eleven lo he intentado con CSS3, pero es cierto que diseñar un sitio web para Safari no es la mejor opción, ya que es un navegador más avanzado que los que la mayorá­a de la gente utiliza. Buscando soluciones llegué a tech4eleven.com y de ahá­ a Younic folda, un sitio web alemán que explica este truco.

Scaling body background images with pure CSS describe una forma super fácil de agregar una imagen al fondo de un sitio web mediante la colocación de este código después de la etiqueta <body>:

<style type="text/css">
#fondo {width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0;}
</style>

</head>

<body>
<img id="fondo" src="imagendefondo.jpg" />

Si usas WordPress, la etiqueta <body> la encontrarás en el archivo de cabecera (header.php).

Una cosa que llama la atención de este código es que puede que tengas que cambiar “position: absolute” por “position: fixed” si no funciona correctamente en tu sitio web / fondo. Ten en cuenta que la imagen puede ser ampliada para ajustarse a las pantallas panorámicas. Echa un vistazo a estos ejemplos, redimensionando el tamaño de la ventana de tu navegador:

  • Ejemplo 1. Alto y ancho de la imagen escalables. El problema es que se deforma.
  • Ejemplo 2: Solo el ancho es escalable, de esta forma la imagen se ajusta al ancho de la ventana y no se deforma.
  • Ejemplo 3: Si lo usas con moderación, con imágenes que no pesen demasiado, pueden ser muy grandes y tu página cargará algo más rápido.

Para los ejemplos 2 y 3, he modificado el código, a los diseñadores gráficos nos horrorizan las imágenes deformadas. Asá­ que lo que he hecho ha sido prescindir del valor “height”, que controla el alto de la imagen. Fijando el ancho al 100%  el alto se redimensiona automáticamente en forma proporcional:

<style type="text/css">
#fondo {width:100%; position: absolute; z-index: -1; top: 0; left:0;}
</style>

</head>

<body>
<img id="fondo" src="imagendefondo.jpg" />

Via tech4eleven.com y agregados propios.

¿Te ha gustado este tutorial? ¡Tú también puedes escribir el tuyo!

13 comentarios en “Cómo hacer una imagen de fondo escalable con CSS

  1. Me imagino, que o bien quieres poner de id “background”, o bien en el CSS el selector sería “#fondo”… si no, aunque no lo he probado, no veo cómo puede aplicarse ese estilo a esa imagen.

  2. Pues a mi me queda como una imagen y no como fondo, de forma que si quito el código de head (style) aparece igual.
    La idea es tener un header escalable de fondo independiente del contenido. ¿No te parece?

  3. Hola Eduardo, gracias por comentar.

    Estamos hablando de fondos de página, aunque la técnica es aplicable al fondo de cualquier elemento como el header.

    Si no notas variación al eliminar el “style” es porque seguramente no has creado más elementos en la página además de la imagen.

    El estilo, lógicamente es mejor escribirlo en la hoja de estilos en cascada (CSS), separado del contenido. El problema es que en la hoja de estilos no puedes resolver la escalabilidad de la imagen de fondo con la propiedad “background”, por eso la imagen va en el HTML y las propiedades del fondo en el CSS 😉

  4. @Ernesto este tutorial no te sirve para crear sliders de fondo, necesitaras un script. Aquí estamos tratando de puro CSS.

    @Lebi supongo que se te crea un scroll vertical cuando usas las versiones no deformadas, porque estás forzando el ancho al 100% y quizá no quepa el alto de la imagen en la ventana, por las proporciones que tiene. Si fuerzas el alto en lugar del ancho, el scroll vertical debería desaparecerte.

  5. GRACIASSSS!!
    PERO TENGO UN PROBLEMILLA….
    La imagen se ve muy bien en Dreamweaver, pero cuando lo publico en el navegador no se veeee!!!!!! queda como una imagen que no encuentra!

    Podrian decirme el porqué??

    Esto es lo que tengo:

    <!–
    .style1 {
    color: #FFFFFF;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    .style3 {
    color: #FF0000;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    .style5 {font-size: 35px; font-style: normal; font-weight: normal; text-align: left; font-family: "HelveticaNeue LT 57 Cn";}
    a:link {
    text-decoration: none;
    color: #666666;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: none;
    color: #999999;
    }
    a:active {
    text-decoration: none;
    }

    #fondo {width:100%; position: absolute; z-index: -1; top: 0; left:0;}

    Esperare la respuesta. GRACIAS!!!

  6. Muchas gracias por el tuto, me has ahorrado tener que hacer una imagen codeada para la web jajajaja.
    Supongo que al igual que funciona con el fondo, podré fijar una imagen a una parte de la web de tal manera que se mantenga en el centro y escalable, ¿cierto?
    Toda la web que estoy montando, aunque sencilla, funciona solo por imágenes y da sus quebraderos de cabeza: http://inglesjuan.webcindario.com/
    ¡Muchas gracias!

Deja un comentario

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