Adding an image to hero section

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Korhan]

Thank you David, works great!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts