Cómo hacer una 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!
Categorías: Diseño web, WordPress
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
Si te ha gustado este tutorial, subscríbete al feed RSS de todotutoriales.es.
Información Bitacoras.com…
Valora en Bitacoras.com: 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 …..
[...] This post was mentioned on Twitter by Todotutoriales, Angeles Portillo. Angeles Portillo said: Cómo hacer escalable una imagen de fondo con #CSS: http://bit.ly/lbLwZ [...]
[...] Tutorial para principiantes, para hacer escalable una imagen de fondo con CSS. [...]
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.
Gracias por avisar Jcl, tienes toda la razón, o ambos “background” o ambos “fondo” (ha sido un lapsus), corregido
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?
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
parcero mil gracias…. este me funciono de maravilla…. llevaba restos tratando de solucionar mi problema del fondo de pagina al 100%
100 puntos a este tuto
Buen tutorial, una pregunta podría con este ejemplo hacer un efecto slider de imagenes que vayan rotando con efecto de trancicion? y que al mismo tiempo tengan el fondo a un 100% ?
mil gracias de verdd me salvaste de una!!!
una preguntica por que se me crea un scroll para baja?
@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.
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!!!
Gerardo revisa la ruta que has puesto en el html. Si no encuentra la imagen es porque la ruta debe ser incorrecta, supongo.