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:

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 estática, 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:

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:

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, y que además sea responsive, quedaría así:

Y como siempre: ¿dónde colocamos este código para poner una imagen de fondo?

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