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.

Desarrollo Web by esther solà
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.