[Resolved] Adding an image to hero section

Home Forums Support Adding an image to hero section

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1376416
    Korhan

    Hi, I would like to add png image on top of my hero background image and align it to the bottom left corner. How can I do this please?

    How can I define the image size different for desktop and mobile please?

    #1376949
    David
    Staff
    Customer Support

    Hi there,

    You would add your two images using HTML like so:

    <img class="hero-image mobile hide-on-desktop hide-on-tablet" src="URL_to_mobile/image.jpg" alt="Alt text" width="500" height="600">
    <img class="hero-image desktop hide-on-mobile" src="URL_to_desktop/image.jpg" alt="Alt text" width="500" height="600">

    I included the hide-on-* classes:

    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    Then you can use this CSS to position:

    
    .page-hero {
        position: relative;
    }
    .hero-image {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    You will need to make sure the Header Element has enough bottom padding to accomodate the image to stop it from overlapping the content.

    #1377544
    Korhan

    Thank you David, works great!

    #1377571
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.