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!
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 página 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.
Muchas gracias! unas horas buscando y mi único error era el position:absolute que tenía que usar fixed y eres el único que lo menciona. Gracias de verdad
Muchas gracias por el tutorial. Sencillo y directo.
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!