Archived topic
Adding an image to hero section
3 replies · Started by Korhan on July 25, 2020
Viewing posts 1–4 of 4
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?
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.
Thank you David, works great!
Glad to be of help
This archived topic is closed to new replies.
