Macro Informatica Macro Informatica, desarrollo web, sistemas operativos, android, java, herramientas web,… scripts, proyectos y snippets a tu alcance en español
Vamos a ver como conseguir poner una imagen de fondo completa, que cubra o bien todo el cuerpo de nuestra web o bien un contenedor.
¿Que se puede/quiere conseguir?
- Imagen de fondo que cubra la página completa sin espacios en blanco.
- Imagen que se redimensiona cuando se necesita.
- La imagen guarda las proporciones, sea cual sea su tamaño.
- Centrar la imagen.
- No crear scrollbars si la imagen es demasiado grande
- Ser compatible con la mayor cantidad de navegadores.
Imagen de fondo con CSS3
Se puede hacer una imagen de fondo completa sólo con código CSS3 de forma limpia y rápida, y además con bastante rango de compatibilidad. Usamos el selector de clase html para asegurarnos que la imagen va a cubir el 100% de la altura del navegador.
|
1 2 3 4 5 6 7 |
html { background: url(images/full-background-image.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } |
Imagen de fondo CSS
También se puede crear una imagen de fondo con CSS con aquellas que introducimos de forma manual y conseguir que se ajuste al 100% en la mayoría de los casos.
|
1 |
<img class="bgf" src="images/full-bacground-image.jpg" /> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
img.bgf { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { img.bgf { left: 50%; margin-left: -512px; // La mitad del tamaño de la imagen que vayamos a poner!! } } |
El problema surge cuando la pantalla es más alta que ancha (no es lo normal), en las que la imagen se empieza a distorsionar, con lo que abría que invertir los valores…
Imagen de fondo con CSS, 2º método
Otra forma de poner una imagen de fondo completa solo con CSS es añadiendo la imagen de fondo a nuestro código HTML y luego asignándole una altura y anchura mínima del 100%.
|
1 |
<img id="bgf" src="images/full-bacground-image.jpg" /> |
|
1 2 3 4 5 6 7 |
#bgf { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; } |
Ver ejemplo
Con este código conseguiremos que la imagen cubra todo nuestra web pero no estará centrada… una forma de solucionarlo es introduciendo la imagen dentro de un div y asignándole a este una altura y anchura del doble de nuestro navegador.
|
1 |
<div id="bgf"><img src="images/full-bacground-image.jpg" /></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#bgf { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #bgf img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } |
Imagen de fondo con Javascript
Utilizando Javascript y jugando con el ratio altura / anchura, podemos conseguir una imagen de fondo perfecta, ya que sólo con CSS no podemos averiguar la altura y anchura del navegador.
Si el aspect ratio de la imagen en cuestión es superior al del navegador pondremos la imagen con una altura del 100%. Por el contrario, si es menor, tendremos que poner la anchura al 100%.
|
1 |
<img id="bgf" src="images/full-bacground-image.jpg" /> |
|
1 2 3 4 5 6 7 8 9 10 11 |
#bgf { position: fixed; top: 0; left: 0; } .w100 { width: 100%; } .h100 { height: 100%; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
$(window).load(function() { var ratio = $("#bgf").width() / $("#bgf").height(); function resizeBG() { if ( ($(window).width() / $(window).height()) > ratio) { $("#bgf").removeClass().addClass('w100'); } else { $("#bgf").removeClass().addClass('h100'); } } $(window).resize(resizeBG).trigger("resize"); }); |
