Archived topic
How to Add Transparent Container to Hero Image
3 replies · Started by Akshay on December 27, 2020
Hi. I am building a new website using the "Merch" template. I would like to add some text to the Hero image using a transparent container. Here's an example URL https://www.ashokamachines.com/. I would like to have the information displayed in the same way.
Thanks in advance.
Hi,
Can you link us to the page you're working on? So we could check the DOM structure of your Hero image.
If you've yet to create a Hero section, you can use the Header element.
https://docs.generatepress.com/article/header-element-overview/
As for the transparent container, we can style it with CSS using a background-color: property with rgba(); values.
Hi Elvin. Here's the link Tech Hamper
Hi there,
in the Header Element content you will need to add a <div> wrapper with a custom class to your content so you can then style it eg.
<div class="hero-content">
<!-- your Hero content here -->
</div>Then you can style it with CSS:
/* Add padding and background */
.hero-content {
padding: 20px;
background-color: rgba(255,255,255,0.4);
}
/* Set width on tablet / desktop */
@media(min-width: 769px) {
.hero-content {
max-width: 50%;
}
}