'I'm trying to fit an image in between my horizontal nav bar and the body of text, but the body of text overlaps the image. How to add space below?

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 class="pic" src="https://upload.wikimedia.org/wikipedia/en/e/e9/Rosalind_Franklin_%281920-1958%29.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;}
htmlcssimagespacingplacement


Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Robson Moura
Solution 2 Neidd

Related Questions