Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
  
<div class="container">
  
  <h1>Stuff</h1>
  
  
  
    <div class="row my-row">
      
        <div class="col-sm-8">
          
        <div class="content">
          This is inside a relative positioned z-index: 1 div
          </div>
​
         <div class="background"><!--empty bg-div--></div>
        </div>
      
        <div class="col-sm-4 image-col">
            <img src="http://placehold.it/200x400/777777/FFFFFF&text=image+1" class="img-fluid">
        </div>
      
    </div>
   
      <h1>Stuff</h1>
​
  
</div>
  
​
  
  
</body>
</html>
 
.content {
        text-align: center;
        padding: 10px;
        background: #ccc;
​
}
​
​
@media (min-width:768px) { 
    .my-row {
        position: relative;
        height: 100%;
        border: 1px solid red;
        overflow: hidden;
    }
    .img-fluid {
        width: 100%
    }
    .row.my-row > [class*="col-"] {
        position: relative
    }
    .background {
        position: absolute;
        padding-top: 200%;
        left: 15px;
        top: 0;
        width: 97%;
        background: #ccc;
    }
    .content {
        position: relative;
        z-index: 1;
        width: 100%;
        text-align: center;
        padding: 10px;
    }
​
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
carasmopro
0viewers