put div underneath absolute img

I am trying to place some text underneath a picture with a variable height (absolute positioned) I tried setting it to ‘relative’ but then it won’t have the effect of the variable height which I really want for my site.

CSS

header{
  background-color: #f49b42;
}

body{
  font-family: Lora;
  margin: 0;
  padding: 0;
}

img{
  width: 100%;
  height: auto;
  clip: rect(0px,10000px,400px,0px);
  position: absolute;
}

h1{
  font-family: Pacifico;
  margin: 0 20px;
}

p#feelgood{
  position: absolute;
  color: wheat;
  margin: 80px 0;
  text-align: center;
  width: 100%;
  text-shadow: 0px 1px #4c2816;
}

p{
  margin: 20px;
  text-align: justify;
}

span{
  font-family: Pacifico;
}
<body>

<header>
  <h1> Music </h1>
   <img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
  <p id="feelgood"> makes me feel good</p>
</header>

<div class="music-quotes">
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span> </p>

<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>

<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>

<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>

<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</div>


</body>

here is my jsfiddle (you might not see the effect of the difference of absolute positioning to relative because you can’t get it wide enough)
https://jsfiddle.net/goblincake/htgq07pb/



I think this is what you were going for…

https://jsfiddle.net/htgq07pb/5/