Welcome area overlay pattern too dark


#1

Hi Vlad and team,

You guys are sure busy :slight_smile:

Im working on the rocked pro theme and having some troubles. Perhaps you cn assist. The welcome area has a black overlay pattern. I would like to change the size of this overlay pattern to cover only the text and the button. This will expose the image nicely (now it is too dark) and still let the text be very readable.

Alternative.
Can I change this to 100% transparent or better just turn it off?

website: remezo.nl

cheers


#2

Try adding this code:

.header-image::after {
opacity: 0;
}

Using a custom CSS plugin. Or if youโ€™re using a child theme just add it to your stylesheet.


#3

Thank you :slight_smile: it is 100% transparent. Looks better already.

Can you help with resizing the overlay patern?..I would like to change the size of this overlay pattern to cover only the text and the button as one nice square black box in the center with f.e. 40% opacity.


#4

Correction on my last, I think it is enough when the overlay pattern covers only the Header title and the header text.

The button has its own color and is fully readable.


#5

Hi @Julio,

You can use the css code below to cover the Site title and site description only with the overlay:

.header-image::after {
    top: 27%;
    height: 25%;
}

#6

Yep it works like a charm, used the dev tools you sugested and with the hints i managed to have the result i wanted :slight_smile:

it is now:

.header-image::after {
opacity: 0.6;
Height: 37%;
Top: 25%;
Width: 40%;
Left: 30%;
}

But more important Iโ€™m getting acustomed with this tool :slight_smile:

So thx!