Streaming live at 10am (PST)

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


#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.


#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


#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.


#6

:blush: Works like a charm. Thanks.


#7

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