Cómo hacer una imagen de fondo escalable con CSS
Martes, octubre 20th, 2009
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">
#background {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">
#background {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!
Etiquetas: background images, body background, Código, crear un sitio web, CSS, Diseño web, fondo web, Google, imágenes de fondo, navegador, Safari, WordPress
Artículos relacionados
