[Resolved] How to Add Transparent Container to Hero Image

[Akshay]

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.

[Elvin]

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.

[Akshay]

Hi Elvin. Here’s the link Tech Hamper

[David]

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%;
    }
}

[Author]

Posts