Añadir imagen de fondo o background a un widget area

Mini-tutorial para añadir una imagen de fondo con CSS a un widget area de nuestro tema.


por

Si trabajas con Genesis Framework y necesitas añadir una imagen de fondo a una area de widget que has creado, o bien que ya viene con tu child theme, puedes hacerlo de forma sencilla con CSS.

Suponienddo que tu widget area tenga la clase .front-page-2 asignada, simplemente tendríamos que aplicarle estos estilos:

.front-page-2 {
    background-image: url('https:/esthersola.com/wp-content/uploads/2019/10/imagen-fondo.jpg');
    background-color: #000; 
    height: 500px; 
    background-position: center;
    background-repeat: no-repeat; 
    background-size: contain; /* o background-size: cover; si prefieres que cubra todo el area por completo */
}

En este caso estaríamos utilizando una imagen de la carpeta uploads (la biblioteca de medios), pero podríamos utilizar una de la carpeta del tema para evitar riesgo de que se borrara en algún momento desde el admin.

background-image: url('images/imagen-fondo.jpg'); 
// (apuntaría a la ruta /wp-content/themes/child-theme-activo/images/imagen-fondo.jpg )

El siguiente paso, que veremos en otro tutorial, es crear en el personalizador de WordPress una nueva opción para que se pueda modificar esta imagen dinámicamente desde allí, en lugar de fijarla directamente desde el código.

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA