Placing blob background directly under the image

November 23, 2021

What am I trying to achieve is to have a blob background behind the orange. The most important thing is that whenever window is resized that the blob will always stay directly behind the orange and not move to left or right. Could anybody help me achieve that? I would appreciate that very much.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>Hello Everyone</h1>
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-6">
      <h3>Column 1</h3>
      <p>I would like to place the blob directly behind the orange</p>
      <p>And then block the movement so whenever window is resized all is in the same place</p>
    </div>
    <div class="col-sm-6 col-6" style="position:relative;left:0;top:0">
      <img src="http://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"
       style="width:100%;">
       <img src="https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00" style="position:absolute;">
    </div>
  </div>
</div>

</body>
</html>

>Solution :

You should position your element with left: 0; top: 0; (putting it on relative element has no effect):

.images {
  position: relative;
}

.images .bottom-image {
  width: 100%;
  position: relative;
  z-index: 5;
  opacity: .9
}

.images .top-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: .9;
  z-index: 4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <div class="jumbotron text-center">
    <h1>Hello Everyone</h1>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-6">
        <h3>Column 1</h3>
        <p>I would like to place the blob directly behind the orange</p>
        <p>And then block the movement so whenever window is resized all is in the same place</p>
      </div>
      <div class="col-sm-6 col-xs-6 images">
        <img class="bottom-image" src="http://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"/>
        <img class="top-image" src="https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00"/>
      </div>
    </div>
  </div>