1

I'm using a absolute positioned div on top of an image. The div has a coloured background with an opacity less than 1 (so you can see the image). My issue is that you can see some white space below the image.

#zero {
  max-width: 450px;
  margin: 0 auto;
}

#container {
  position: relative;
}

img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

#title {
  position: absolute;
  top: 0;
  right: 0 bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  color: white;
  background-color: red;
  opacity: 0.67;
}
<div id="zero">
  <div id="container">
    <img src="450x300.jpg">
    <h2 id="title">Title</h2>
  </div>
  <p>How to get rid of the white space below the image?</p>
</div>
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Wouter van der Zee
  • 47
  • 6

2 Answers2

2

By default, an image is rendered inline, like a letter.

You can adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or change the display so it isn't inline.

coder
  • 614
  • 3
  • 12
  • 33
0

The title has height:100%, which means it will take 100% percent of its parent's height. The remaining element then overlaps it.

You can either delete the height:100% directive in your title, letting the layout set itself automagically, or specify a lower percentage value and adjust your font-size accordingly.

#zero {
  max-width: 450px;
  margin: 0 auto;
}

#container {
  position: relative;
}

img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

#title {
  position: absolute;
  top: 0;
  right: 0 bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  color: white;
  background-color: red;
  opacity: 0.67;
}
<div id="zero">
  <div id="container">
    <img src="450x300.jpg">
    <h2 id="title">Title</h2>
  </div>
  <p>How to get rid of the white space below the image?</p>
</div>
Saucistophe
  • 314
  • 2
  • 10