CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user8135666
user8135666

Reputation:

overlapping images one over another in bootstrap

I want to overlap the two images such that the bottom image comes up to the top image. Here is the code

<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.3.7/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .col-md-6{
            margin: 1px; 
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6"><img src="top-header-1.png"></div>
                <div class="col-md-6"><img src="Base-BG_4.png"></div>
            </div>
        </div>
    </body>
</html>

here is the attached screenshot

enter image description here

I want to be like this

enter image description here

Upvotes: 1

Views: 12527

Answers (2)

Abin Thaha
Abin Thaha

Reputation: 4633

Even though you can use absolute positioning for your requirement, I don't think it is the best way now. You can achieve it using simple margin adjustments.

I hope this is something that you are looking for.

HTML

<div class="header">
  <h1>Header</h1>
</div>
<div class="content">
  <div class="image-container">

  </div>
</div>

CSS 

.header {
  width: 800px;
  height: 200px;
  background-image: url('http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg');
  background-size: cover;
  background-position: center;
}
h1 {
  text-align: center;
  color: #fff;

}
.image-container {
  width: 600px;
  margin-left: 100px;
  margin-top: -50px;
  height: 200px;
  background-image: url('https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg');
  background-size: cover;
  background-position: center;
}

Refer the codepen sample

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

You need to just add position:absolute; with position:relative as i used

  .col-md-6{
   margin: 1px; 
 }
 
.picContainer {position:relative;}
.pic2 {position:absolute; top:0px; left:0px;}
<href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
 
 <div class="container-fluid picContainer">
    <div class="row">
           <div class="col-md-6"><img src="http://www.qygjxz.com/data/out/114/4676052-image.png"></div>
       <div class="col-md-6 pic2"><img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"></div>
   </div>
    </div>

    </body>
   </html>

Upvotes: 3

Related Questions