Comercio y Marketing

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ás informació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.

https://comercioymarketing.es/wp-content/uploads/mascara_1.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;
}