Poner una imagen de fondo a pantalla completa

Tiempo estimado de lectura: 8 minutos

 

Cómo poner una imagen de fondo

En más de una ocasión necesitamos poner una imagen de fondo con algún contenido por encima de esta. En este caso, pondremos una imagen como fondo de la página web y todo el contenido de la misma se desplazaría por encima de ella.

Lo primero que tenemos que tener en cuenta es que necesitamos una imagen con un tamaño suficiente para que cubra la anchura de nuestra pantalla.

Código que necesitamos

El código que vamos a utilizar es el siguiente:

body {
background-image: url(https://www.josegonzalezbueno.com/wp-content/uploads/2019/11/imagen-fondo-completo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #8EB8F1;
}

Este código hace lo siguiente:

  • Inserta una imagen (imagen-fondo-completo.jpg) en el body de la página, alinea su posición al centro (tanto horizontal como verticalmente). Ya sabes que debes cambiar la url de acceso a la imagen por la que tu hayas insertado en tu WordPress.
  • A continuación, si la imagen es más pequeña que el ancho o el alto de pantalla, hacemos que no se repita y que se mantenga quieta, es decir, que no se desplace con el contenido de la página al hacer scroll.
  • Por último haremos que la imagen ocupe todo el ancho y alto de la pantalla, y mientras se carga esta imagen ponemos un color de fondo #8EB8F1 (un color azulito).

Esta es la imagen que utilizaré de fondo de pantalla:

Fondo de pantalla
Fondo de pantalla

Hacer responsive esta imagen

Si además de poner esta imagen de fondo, queremos hacerla responsive, podemos hacerlo añadiéndole el siguiente código:

@media only screen and (max-width: 799px) {
body {
background-image: url(https://www.josegonzalezbueno.com/wp-content/uploads/2019/11/imagen-fondo-completo-peq.jpg);
}
}

Este código lo que hace es que cuando la pantalla sea menor de 799 píxeles, se cargará otra imagen más pequeña. Lo normal es que sea la misma imagen pero a un tamaño más pequeño (como mínimo de 799 píxeles). A partir de 799 píxeles se utilizará la imagen grande.

Con todo esto, nuestro código completo para la imagen de fondo y que sea responsive, quedaría así:

body {
background-image: url(https://www.josegonzalezbueno.com/wp-content/uploads/2019/11/imagen-fondo-completo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #8EB8F1;
}
@media only screen and (max-width: 799px) {
body {
background-image: url(https://www.josegonzalezbueno.com/wp-content/uploads/2019/11/imagen-fondo-completo-peq.jpg);
}
}

Y como siempre: ¿dónde colocamos este código?

Ahora tenemos que saber dónde debemos colocar este código. Es tan sencillo como pegarlo en el personalizador de nuestro WordPress, para ello vamos al menú Apariencia, Personalizar y en el apartado CSS adicional pegamos el último código que te he mostrado (el que está justo encima de estas líneas).

Imagen de fondo de pantalla
Imagen de fondo de pantalla


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *