Lo más nuevo
Home / Desarrollo web / Imagen de fondo completa

Imagen de fondo completa

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.

Ver ejemplo

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.

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 ejemplo
full background image error

Ver ejemplo

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%.

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.

Ver ejemplo

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%.

Ver ejemplo

acerca de Francisco Javier Jiménez Mesa

Mi formación académica y experiencia profesional se han dirigido hacia el sector de la informática, ámbito en el que he desarrollado un gran número de competencias y habilidades, además de ser éste un entorno de trabajo en el que encuentro una motivación y una satisfacción tanto profesional como personal.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para aceptarlas y la aceptación de nuestra política de cookies