[Resolved] How to Add Transparent Container to Hero Image

Home Forums Support [Resolved] How to Add Transparent Container to Hero Image

Home Forums Support How to Add Transparent Container to Hero Image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1596287
    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.

    #1596331
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1596503
    Akshay

    Hi Elvin. Here’s the link Tech Hamper

    #1596708
    David
    Staff
    Customer Support

    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%;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.