Placing a heading on top of an header image

[BBS (Brent)]

Hi all, I’m having problems with placing a header on top of my header (banner) image. I have tried to put a div box on top of the image (like I’ve seen in tutorials on a similar issue) but it will only go above or below the image. Is there something basic that I’m missing.

Preview link below.
https://preview.webflow.com/preview/donerun1441610126067?preview=10823bc5a4d13d6ef49f473815f9e60a

thank you in advance.
Brent

[vincent (Vincent Bidaux)]

Hi. Can you try to follow these steps?

• select your hader element, give it position:relative, and z-index of 1
• add a div inside that you nale “overlay” and place the content you want over the header (text, images) inside
• give this overlay div a z-index of 2, and position:absolute. Now position it with the potision buttons and arrows.

The rule here is: you want to position the overlay with absolute for it to be on top of the header and not in its flow (above or below, before or after). In order for it to be on top of the header, you need the header, which is the parent, to be positionned, so we gave it position:relative. It has no visual effect but now it’s declared as the reference for any other positionned objects inside. Without this property, positonned objects inside will take an upper element as a reference, like the body.

[BBS (Brent)]

Thanks Vincent. That worked well for altering the heading and making it responsive. However I was trying to have a H1 and then a H2 heading just underneath. Being responsive meant that on some views the H1 text would go to 2 lines, resulting in the H1 heading being displayed over the H2 heading. With this being the case I think I’ll leave the text as part of the JPEG and just type the H1 and H2 headings elsewhere on the site (for SEO) and leave it as it. Your suggestion worked, however as I am new it seems that whenever I change one thing and it looks good that there are knock-on effects that I haven’t thought about which then need to be addressed.

Thanks
Brent.