[Support request] opaque background on main image

[Richard]

Hi, how do i add in an opaque background like something on https://www.clapham-landscapes.co.uk/ in the main image please?

[Leo]

Hi there,

Are you using a header element currently?

If so can you link me to the site in question?

Let me know 🙂

[Richard]

Hi Leo, sure thing (how do i do that in private please?)

[Leo]

You can edit the original topic and use the private URL field.

Let me know 🙂

[Richard]

Thanks! I’ve done that 🙂

[Leo]

So you want to apply that for the h1 and h2 on the home page hero?

What about the button?

[Richard]

Yes please Leo.

I’m just going to make the button a different colour I think 🙂

[Leo]

Try adding a <div> around your page hero content like this:
https://generatepress.com/forums/topic/parallax-text-background-box/#post-1170973

[Richard]

Thanks Leo, that’s added in a white background – ideally need it opaque – any ideas?

[David]

Hi there,

in this CSS:

.hero-content {
     background-color: #ffffff;
     padding: 20px;
}

Change:

background-color: #ffffff;

to:

background-color: rgba(255,255,255,0.7);

the 0.7 is the alpha value that defines its opacity

[Author]

Posts