I'm trying to fit an image in between my horizontal nav bar and the body of text, but the body-CodePudding

I know this is probably a common question, but I just can't figure it out or find it on this site already.

The image is being overlapped with text--I'm trying to have the text stay underneath it.

HTML:

<div id="header-bg" >
  <img  src="https://upload.wikimedia.org/wikipedia/en/e/e9/Rosalind_Franklin_(1920-1958).jpg" alt="Portrait of Rosalind Franklin with her hand on her chin, looking off to the left.">
</div>

CSS:

#header-bg {display: flex; height: 100px; background: #AAB4AF; align-items: center;}
.pic { width: 600px; padding: 10px; margin: auto;}

CodePudding user response：

If you want text to be hidden underneath picture you have to change it's z-index to the value lower than tag containing picture.

You can read more here: https://www.w3schools.com/cssref/pr_pos_z-index.asp

CodePudding user response：

The height of your #header-bg is smaller than your image, so your text is overlapping the image.