Archived topic
opaque background on main image
9 replies · Started by Richard on February 17, 2020
Hi, how do i add in an opaque background like something on https://www.clapham-landscapes.co.uk/ in the main image please?
Hi there,
Are you using a header element currently?
If so can you link me to the site in question?
Let me know :)
Hi Leo, sure thing (how do i do that in private please?)
You can edit the original topic and use the private URL field.
Let me know :)
Thanks! I've done that :)
So you want to apply that for the h1 and h2 on the home page hero?
What about the button?
Yes please Leo.
I'm just going to make the button a different colour I think :)
Try adding a <div> around your page hero content like this:
https://generatepress.com/forums/topic/parallax-text-background-box/#post-1170973
Thanks Leo, that's added in a white background - ideally need it opaque - any ideas?
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