-1

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.

mukul
  • 171
  • 1
  • 15
  • 2
    Maybe you have a typo here : `` instead of `

    `, I presume.

     – Philippe May 24 '23 at 11:31
  • Not a fix but note that the [
    ](https://html.spec.whatwg.org/dev/embedded-content.html#the-br-element) tag does not use and does not need a closing slash and never has in any HTML specification.     – Rob May 25 '23 at 07:36

2 Answers2

1

[final answer]

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

#content {
  width: 100%;
}

#overlay {
  background: url(https://picsum.photos/800);
  background-repeat: no-repeat;
  background-size: fill;
  background-position: center;
}
<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>

[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 :

#phase1content {
  position: relative;
}

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

width 100% as requested. Certainly perfectible.

Philippe
  • 1,134
  • 12
  • 22
  • Thanks. It worked. Its not directly related but if i use a correct relative path "../assets/img.png" nothing shows up but if i use an external url "https://picsum.photos/800", it works. Any idea why? – mukul May 24 '23 at 13:17
  • You're welcome. No, no immediate idea. Maybe [here](https://stackoverflow.com/a/5815491/4698373). – Philippe May 24 '23 at 13:54
  • @mukul, I observed issues with my first answer, please have a look at the new one. Have a nice day. – Philippe May 25 '23 at 05:20
1

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

#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%;
}
<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>

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

manoj
  • 109
  • 1
  • 7