Adding a div to be fixed at the bottom of the hero image

Design help General
1

Hi,

I am trying to add a div element with some background opacity and added text to the bottom of my hero image. I want it so its fixed to the bottom of the image.

Thanks.

992×173 9.22 KB

2

Hi @Beez

  1. Create div, give it position: relative

  2. Add image inside the div

  3. Add another div inside the div, give it position: absolute, aligning: bottom.

  4. Style 2nd div as you need and add text/heading there

Regards,
Anna

1 Like
3

Thank @sabanna. Will try it out.

4

Hi @sabanna, I already have the image in a section element. it has a height of 600 and covers the whole section. So basically there is a nab bar, then a hero section. And in the hero section there’s the image. Is there a work around that?

5

Well, now you just add div (for text) inside the section.
Section set position: relative and new div- position: absolute.

1 Like
6

:blush: Works like a charm. Thanks.

1 Like
7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.