How to make background image height same as height of div content?

I have a div containing a paragraph. I want to add a translucent background image to the paragraph but only upto height same as height of the paragraph. I have:

<div id = "phase1box">
    <div id = "phase1content" class = "phasecontent">
        <h1>Phase 1</h1>
        <p>
        •	some text.<br/>
        •	some text.<br/>
        •	some text.<br/>
        •	some text.<br/>
        •	some text.<br/>
        </p>
    </div>
</div>

CSS:

#phase1box {
    position: absolute;
    top: 0%;
    width:100%;
    height:18%;
    background-image: url("../assets/phase1box.png");
}

I have hard coded height: 18% but instead i want the background image to take height of the div (paragraph). If i do height: auto no background image shows up.

[final answer]

As absolute positioning in my first answer reveals board effects (overlapping of following elements), this approach is certainly better:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

#content {
  width: 100%;
}

#overlay {
  background: url(https://picsum.photos/800);
  background-repeat: no-repeat;
  background-size: fill;
  background-position: center;
}

<!-- language: lang-html -->

<div id="before">
  some div
</div>
<div id="content">
  <div id="overlay">
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
  </div>
</div>
<div id="after">
  other div
</div>

<!-- end snippet -->

[first answer]

phase1box in your code is a container. Instead, we could consider it as an overlay on phase1content, so reverse the hierarchy as follow :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#phase1content {
  position: relative;
}

#phase1box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
}

<!-- language: lang-html -->

<div id="phase1content" class="phasecontent">
  <div id="phase1box">
    <h1>Phase 1</h1>
    <p>
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/>
    </p>
  </div>
</div>

<!-- end snippet -->

width 100% as requested. Certainly perfectible.

Method 1:
Try this to give background-size, background-position, background-repeat CSS properties

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#phase1content {
  position: relative;
}
#phase1box {
  position: absolute;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}

<!-- language: lang-html -->

<div id="phase1content" class="phasecontent">
  <div id="phase1box">
    <h1>Phase 1</h1>
    <p>
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/> 
      • some text.<br/>
    </p>
  </div>
</div>

<!-- end snippet -->

Method 2:
You can also use a direct background image as parent div #phase1content without position stuffs...