Máscara de fondo personalizada para incorporar a Elementor y fusionar imagen de fondo con la máscara, respetando el texto y botón.
Máscara personalizada con elementor
Para conseguir un efecto de máscara con elementor debeos seguir algunos pasos:
1.- Creamos una máscara personalizada con Affinity o cualquier porgrama de edición. En nuestro caso hemos creado una imagen con cuadrados con vértices redondeados en formato 1280 x 720 y la he guardado en formato svg.
2.- Subir las imágenes a medios: En el menú de wordpress podemos subir la imagen de la máscara en formato SVG y la imagen de fondo en formato JPG 1280×720. De esta forma podremos copiar loas dos URL de las dos imágenes que vamos a necesitar cuanto incluyamos el código CSS personalizado.
3.- Ya en la página y editando con elementor, dentro de la sección seleccionamos avanzado e introducimos el CSS personalizado que he pedido a ChatGPT: «Entrega un CSS donde se fusionen dos imágenes, una máscara y una imagen de fondo». Este es el resultado.
.header-solo {
position: relative;
overflow: hidden;
isolation: isolate;
}
.header-solo::before {
content: '';
position: absolute;
inset: 0;
background-image: url('https://comercioymarketing.es/wp-content/uploads/CORTA-CARA.jpg'); /* tu fondo */
background-size: cover;
background-position: center;
-webkit-mask-image: url('https://comercioymarketing.es/wp-content/uploads/mascara_1.svg');
mask-image: url('https://comercioymarketing.es/wp-content/uploads/mascara_1.svg');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
z-index: 0;
}
.header-solo > * {
position: relative;
z-index: 1;
}
Mascara con Efecto Ken Burns
Si lo que quieres es un efecto de movimiento de la imagen dejando estática la máscara puede que este código CSS te sea útil.
.header-solo {
position: relative;
overflow: hidden;
isolation: isolate;
/* --- máscara estática aquí --- */
-webkit-mask-image: url('https://ezoco.info/almasalud/wp-content/uploads/sites/161/2025/04/mascara_1.svg');
mask-image: url('https://ezoco.info/almasalud/wp-content/uploads/sites/161/2025/04/mascara_1.svg');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* --- capa de fondo animada Ken Burns --- */
.header-solo::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: url('https://ezoco.info/almasalud/wp-content/uploads/sites/161/2025/04/alma_gym.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform-origin: center center;
transform: scale(1) translate(0, 0);
animation: kenBurns 20s ease-out forwards;
}
/* para que tu texto/botones queden por delante */
.header-solo > * {
position: relative;
z-index: 1;
}
/* animación Ken Burns: zoom + ligero paneo */
@keyframes kenBurns {
0% {
transform: scale(1) translate(0%, 0%);
}
100% {
transform: scale(1.2) translate(10%, 10%);
}
}
Si tienes una imagen a modo de separador, se puede fusionar con el fondo, vas a necesitar este CSS:
.seccion-con-separador {
position: relative;
width: 100%;
min-height: 720px;
background-image: url('https://seojaen.com/wp-content/uploads/fondo.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
}
.seccion-con-separador::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 100%; /* ajusta según el tamaño de tu SVG */
height: auto;
aspect-ratio: 1280 / 170; /* opcional: relación de aspecto de tu SVG */
background-image: url('https://seojaen.com/wp-content/uploads/pincelada.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
pointer-events: none;
z-index: 2;
}
Juande Marín
Profesor de Marketing digital, divulgador de inteligencia artificial y neuroeducación. Especializado en posicionamiento en buscadores y diseño web. Autor de varios libros relacionados con el comercio electrónico y el marketing digital (McGraw Hill, Paraninfo,…) Juande2marin
