Tutorial de tamaño de imagen de fondo CSS: cómo codificar una imagen de fondo de página completa

Este tutorial le mostrará una forma sencilla de codificar una imagen de fondo de página completa usando CSS. Y también aprenderá cómo hacer que esa imagen responda al tamaño de pantalla de sus usuarios.

Hacer que una imagen de fondo se extienda por completo para cubrir toda la ventana del navegador es una tarea común en el diseño web. Afortunadamente, esta tarea se puede resolver con unas pocas líneas de CSS.

Portada de la ventana gráfica con imagen

Primero, queremos asegurarnos de que nuestra página realmente cubra toda la ventana gráfica:

html { min-height: 100%; }

Dentro html, usaremos la background-imagepropiedad para configurar la imagen:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

La magia de la propiedad 'Tamaño de fondo'

La magia pasa con la background-sizepropiedad:

background-size: cover;

coverle dice al navegador que se asegure de que la imagen siempre cubra todo el contenedor, en este caso html. El navegador cubrirá el contenedor incluso si tiene que estirar la imagen o cortar un poco los bordes.

Debido a que el navegador puede estirar la imagen, debe usar una imagen de fondo que tenga una resolución suficientemente alta. De lo contrario, la imagen puede aparecer pixelada.

Si le interesa que toda la imagen aparezca en el fondo, entonces querrá asegurarse de que la imagen tenga una relación de aspecto relativamente cercana en comparación con el tamaño de la pantalla.

Cómo ajustar la posición de una imagen y evitar el mosaico

El navegador también puede optar por mostrar su imagen de fondo como mosaicos dependiendo de su tamaño. Para evitar que esto suceda, use no-repeat:

background-repeat: no-repeat;

Para mantener las cosas bonitas, mantendremos nuestra imagen siempre centrada:

background-position: center center;

Esto centrará la imagen tanto horizontal como verticalmente en todo momento.

Ahora hemos producido una imagen totalmente receptiva que siempre cubrirá todo el fondo:

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

Cómo arreglar una imagen en su lugar cuando se desplaza

Ahora, en caso de que desee agregar texto en la parte superior de la imagen de fondo y ese texto desborde la ventana gráfica actual, es posible que desee asegurarse de que su imagen permanezca en segundo plano cuando el usuario se desplaza hacia abajo para ver el resto del texto:

background-attachment: fixed;

Puede incluir todas las propiedades de fondo descritas anteriormente usando una notación corta:

background: url(image.jpg) center center cover no-repeat fixed;

Opcional: Cómo agregar una consulta de medios para dispositivos móviles

Para agregar un poco de guinda al pastel, es posible que desee agregar una consulta de medios para pantallas más pequeñas:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

Puede usar Photoshop o algún otro software de edición de imágenes para reducir el tamaño de su imagen original y mejorar la velocidad de carga de la página en las conexiones de Internet móvil.

Entonces, ahora que conoce la magia de crear un fondo de imagen de página completa y receptivo, ¡es hora de crear algunos sitios web hermosos!

¿Quiere ver más conocimientos y consejos sobre desarrollo web?

  • Suscríbete a mi newsletter semanal
  • Visita mi blog en 1000 Mile World
  • Sigueme en Twitter