My goal is to have an image positioned between two separate div tags similar to a Facebook profile page:
https://i.sstatic.net/sBocE.jpg
I have tried solutions found here but they didn't work as expected. The image position changes when the screen size decreases due to Bootstrap's responsiveness, which is not what I want.
Below is the code I used for testing (which may not be perfect) -
HTML -
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
</div>
The CSS -
.container {
background-color: cadetblue;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -60px;
right: 200px;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
This is the result I achieved: