Problema opacidad de imagen y particles

Hi Carlos,

You currently have this custom CSS code in Appearance > Customize > Additional CSS:

.gb-container.particle-background {
    position: relative;
    z-index: 0;
}

I tried manually modifying the opacity of this Container Block with a class of particle-background through modifying the above code as such:

.gb-container.particle-background {
    position: relative;
    z-index: 0;
    opacity: 0.9;
}

This effectively altered the opacity without affecting the particles.

At the moment, I don’t see any opacity setting applied to this Container Block. If you prefer, can you try applying it and I’ll see from my end why changing the opacity is affecting the particles?

Hope to hear from you soon. :)

Muchas gracias Fernando!

Funciona perfectamente, el problema que veo ahora es que el fondo es blanco cuando deberia ser negro y no entiendo la razon puesto que el css es el siguiente:

.gb-container-65930966 {
background-color: #000000;
background-image: url(https://safegest.com/wp-content/uploads/2022/06/camion-mercancias-peligrosas-1.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

Y desde el panel de wordpress lo cambio a negro pero sin embargo no me hace el cambio.

He tratado de poner background-color: #000000 !important; pero no funciona

Me gustaria que quedara del mismo color que esta pagina mas o menos:
https://safegest.com/curso-consejero-seguridad-adr/

Un saludo y gracias

I see. If that’s the case, kindly remove the opacity in the code I mentioned earlier. That opacity affects the image itself.

If you want an opacity that’s based on a color, you’ll need to set the Background Selector to Pseudo Element, and set the Image Opacity there.

See: https://share.getcloudapp.com/rRuOv6mR

I’ll check why the Particles are affected after you’ve made the change.

There might be a CSS you have that’s affecting the pseudo element. I’ll check what it is and see if I can provide a CSS to fix the issue.

Hope to hear from you soon.

Buenas Fernando hice el cambio que me comentaste y efectivamente particles volvio a reducirse en la pantalla.

Tambien voy a tratar de averiguar que puede ser aunque no entiendo mucho de codigo si das con alguna solucion por favor avisame.

Gracias ;)!

https://safegest.com/

Currently, this is what it looks like from my end: https://share.getcloudapp.com/JruovWQg

Have you applied the Opacity? I can’t locate the Pseudo Element the should be present when you add one.

If you have, can you try clearing all caching mechanisms set in your website?

Kindly let us know.

Buenas Fernando, si lo aplique y limpie la cache a ver si ahora puedes verlo.

Un saludo

Thank you, I can see it now.

The issue occurs because by default, the position of the inner Container becomes relative when Opacity is used, and your particle effect has a position of absolute. Because of this, the particle becomes smaller since the inner Container has margins and paddings.

To resolve this, you can unset the position of the inner Container of the particle-background Container Block.

Can you try adding this CSS in Appearance > Customize > Additional CSS:

.gb-container.particle-background > .gb-inside-container {
    position: unset;
}

Kindly let us know how it goes.

Gracias Fernando,

Ahora si que funciona correctamente!! solo una cosa, los titulos tambien modifican su opacidad es decir se vuelven tan opacos como el pseudo elemento, se puede hacer algo contra eso?

Un saludo

I see. Good catch!

I've updated the code I provided here: https://generatepress.com/forums/topic/problema-opacidad-de-imagen-y-particles/#post-2239783

Can you try replacing the current code you have with the new one?

Kindly let us know how it goes!

Funciona perfecto Fernando!!!

Eres un crack!!! lo resolviste genial!!!

UN saludo

You’re welcome Carlos! Glad to be of assistance!