Topic: Color overlay on content image

blederer01
May 2, 2025 at 10:53 am

I cannot seem to figure out how to have my page content have an image behind the color.
I currently have the content color set to a color with some transparency.
When I set a content image, it appears over the color. How can I make the color an overlay.

The site I am working on is https://brucel94.sg-host.com/.

Also is there a way to set the background image so that it does not scroll (fixed)

Thanks
Ying
May 2, 2025 at 5:53 pm
Hi there,

Which image are you referring to? Are you using Generateblocks plugin?

To fix the background image, try this CSS:
```
@media(min-width: 1025px) { 
body {
    background-attachment: fixed;
}
}
```
However, it should only be applied to desktop, as tablet/mobile don’t support it well, I’ve made the code only appply to desktop.
blederer01
May 2, 2025 at 7:11 pm

Thanks for you reply.

I’m just using the customizer for GeneratePress
And I want to have a color overlay for the
Colors –> Content Color and
Content Background Images –> Content.
Alvind
May 4, 2025 at 8:37 pm

Hi there,

I’m not sure which section you want to apply the color overlay to. Can you provide a screenshot for reference?

I believe this will require custom CSS, as there’s no setting for it in the Customizer.
blederer01
May 5, 2025 at 1:41 pm

I want to do it globally in Content
Ying
May 5, 2025 at 4:38 pm

I don’t quite get the idea. Any chance you can provide a mockup for better understanding?
blederer01
May 5, 2025 at 5:08 pm

Hi Ying,
I am sorry I have not been able to find the right terms to describe what I want to accomplish.
Please see this link. https://brucel94.sg-host.com/ for reference

On this site, in the customizer, I have set background image –> content to be an image. In this case it is the interior of a store.

I have also, in the customizer set Colors –> Content —> Background to be a partially transparent green. The idea is to have the transparent green be over the image to make the text more readable.

So the problem is that the transparent color sits behind the image. I want it to be on top of the image.

Thanks
Bruce

Alvind

May 5, 2025 at 9:45 pm

You need to use this CSS to achieve the overlay color effect:

.container#page {
    position: relative;
}

.container#page:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(77,112,68,0.9);
}

blederer01
May 6, 2025 at 4:20 am

Perfect! Thanks so much
Alvind
May 6, 2025 at 6:11 pm

You’re welcome!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Color overlay on content image