How to cover part of a image by background of another div?

Question

I have 2 divs, div1 contains an image and div2 contains some text. I'd like div2 with text to cover part of div1 image by setting margin-top=-50px. However, the background of div2 does not cover image in div1, how can I solve it?

Here is the code:

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

<body>
  <div class="container-fluid">
    <div class="row">
    
      <div class="col-md-12">
        <img src="https://pbs.twimg.com/profile_images/795971591511347200/BE9ga9uY_400x400.jpg">
      </div>
    </div>
  </div>
  
  <div class="container-fluid" style="margin-top: -50px; background: red">
    <div class="row">
      <div class="col-md-12">
        <div>
          Here is some text with background color red. Text covers the image but background does not. 
        </div>
      </div>
    </div>
  </div>
  
</body>

</html>

Tried setting a z-index on the bottom div? – Nick M Mar 16 '19 at 22:56 — Nick M, Mar 16 '19 at 22:56
The image appears broken in the preview. – Andy Hoffman Mar 16 '19 at 22:57 — Andy Hoffman, Mar 16 '19 at 22:57
`position:relative` on the second div will do it – Temani Afif Mar 16 '19 at 22:57 — Temani Afif, Mar 16 '19 at 22:57

score 0 · Answer 1 · answered Mar 16 '19 at 22:56

position: absolute;

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

<body>
  <div class="container-fluid">
    <div class="row">
    
      <div class="col-md-12">
        <img src="https://pbs.twimg.com/profile_images/795971591511347200/BE9ga9uY_400x400.jpg">
      </div>
    </div>
  </div>
  
  <div class="container-fluid" style="position:absolute; background: red">
    <div class="row">
      <div class="col-md-12">
        <div>
          Here is some text with background color red. Text covers the image but background does not. 
        </div>
      </div>
    </div>
  </div>
  
</body>

</html>

Is there a way to set the lower edge of div2 to match the lower edge of div1, and works responsively? — one-hand-octopus, Mar 16 '19 at 23:04

How to cover part of a image by background of another div?

1 Answers1