Añadir una imagen como fondo en cualquier sitio de nuestra web

Tiempo estimado de lectura: 7 minutos

 

Poner una imagen como fondo en cualquier sitio de nuestra web

En esta ocasión vamos a ver cómo podemos poner una imagen de fondo en cualquier sitio de nuestra web. Te mostraré como podemos colocar una imagen de fondo de la sección de comentarios de nuestros artículos, pero como digo, podemos ponérselo a cualquier objeto de nuestra web.

Este artículo completa la de la semana pasada, en el que hemos visto cómo poner una imagen de fondo a nuestra web (o a una página concreta de nuestra web).

Cuestiones iniciales

Si sabes un poco de CSS, te darás cuenta de que necesitaremos la URL de esa imagen, para ser llamada y colocarla dentro de nuestro contenedor. Por esto mismo, lo primero que tenemos que hacer es subir esa imagen a nuestro WordPress, y a continuación copiar la ruta de esa imagen para utilizarla posteriormente.

Debemos saber cual es la ruta de la imagen
Debemos saber cual es la ruta de la imagen

Cómo colocar una imagen como fondo en cualquier sitio de nuestra web

Como hemos dicho anteriormente, vamos a poner una imagen de fondo a la sección de comentarios de nuestra web.

Lo primero que tenemos que hacer es saber el nombre de la sección a la que vamos a aplicarle esa imagen de fondo. Para ello nos situamos sobre esa sección y pulsamos el botón derecho y elegimos la opción Inspeccionar.

Una vez que estamos sobre esa sección, tenemos que buscar el nombre del contenedor general de la misma, en nuestro caso se llama #comment-wrap.

Ahora debemos saber cual es el nombre del contenedor
Ahora debemos saber cual es el nombre del contenedor

A este contenedor vamos a aplicarle la propiedad backgroun-image con la ruta de nuestra imagen. Y para que el contenido no quede pegado a los márgenes, podemos ponerle un padding de 30px (por ejemplo).

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

#comment-wrap {
background-image: url(https://www.josegonzalezbueno.com/wp-content/uploads/2019/11/Nothing-exists-here.png);
padding: 30px;
}

Evidentemente sustituye www.josegonzalezbueno.com por el nombre de tu dominio 😉

Dónde vamos a colocar este código

Como ya has podido adivinar, este código vamos a pegarlo en nuestro Personalizador, así que vamos al menú Apariencia, Personalizar y pegamos el código en el apartado CSS adicional.

Resultado de cómo añadir una imagen como fondo en cualquier sitio de nuestra web
Resultado de cómo añadir una imagen como fondo en cualquier sitio de nuestra web


¿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. *