Streaming live at 10am (PST)

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


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.


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


1 Like

Thank @sabanna. Will try it out.

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?

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

1 Like

:blush: Works like a charm. Thanks.

1 Like

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