Bootstrap 3 div over responsive image [duplicate] - html

Question

This question already has answers here:
Image overlay on responsive sized images bootstrap
(5 answers)
Closed 8 years ago.
I'm trying to have a full width <div> over an image, with text inside it, so that the text goes over the image itself. The grid and the image is responsive, and I can't get the <div> to be 100% of the grid.
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
As you can see, I want the portfolio_desciption to be over the image, fill the width of the grid col-md-6 and have a white background.
Any suggestions on how my CSS should be composed?

Answer 1

tl;dr
Use position: absolute; with top: 0; on the <div> and don't forget to add position: relative; to their parent <div>s.
Solution
.portfolio_description {
position: absolute;
top: 0;
width: 100%;
background-color: white;
}
You also need a new class that you need to add to the parent elements of the <div>s that have the .portfolio_description class.
.portfolio-block {
position: relative;
}
Explanation
The MDN docs on position: relative; states:
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
Also, the MDN docs on top states:
When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block.
So you need absolute positioning and because that is positioned relatively to the nearest non static ancestor, you need to make the parent elements relatively positioned, because that positioning is not static and will keep the element flow intact. Then just make sure the top property is set to 0 so there is no distance between the <div> and its containing block.
Demo
In this example I used a semi-transparent background to prove that it is over the image.
.portfolio_description {
position:absolute;
width:100%;
top:0;
background-color:rgba(255, 255, 255, 0.5);
}
.portfolio-block {
position: relative;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->

Answer 2

Got it working with the following CSS:
.portfolio_description {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}

Answer 3

You'll have to use absolute positioning, something like this
.col-md-6 {
position: relative;
}
. portfolio_description{
position: absolute;
width: 100%;
bottom: 0px;
hieght: 60px;
}

Answer 4

You should use a background image instead of inline images, adjust your code like below then add your image as a background image in your CSS, this gives you a lot more flexibility. this way you can absolutely position everything inside your #portfolio1 div
<div class="col-md-6">
<div id="portfolio1">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p>
<span class="read_more"></span>
</div>
</div>
</div>

Answer 5

add the style=" padding-left: 0px ; padding-right: 0px;" in the col-md-6 or in whichever column div u are adding your image , the padding will fix the image entirely in the column without any before and after gap