Placing blob background directly under the image-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

You can insert the blob image as background-image property of the div.

You can read more about it on https://www.w3schools.com/cssref/pr_background-image.asp

Note: Here orange has white background, so cant see clearly, you can check it with some transparent background image.

<!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; background-image: url('https://d3b1ak9ylguumf.cloudfront.net/stencil/public/static/images/wave-blob.svg?h=b9d69d25&v=2020-08-19.00');">
      <img src="https://riviste.newbusinessmedia.it/wp-content/uploads/sites/27/2013/12/Fotolia_11313277_M.jpg"
       style="width:100%;">
    </div>
  </div>
</div>

</body>
</html>