I'm trying to position a transparent div at the bottom of a wide image using absolute positioning.
<div class="background">
<img src="background.jpg" class="image">
<div class="box">
<p>paragraph</p>
</div>
</div>
Here is the CSS:
.background {
Position: relative;
}
.image {
width: 100%;
display: block;
}
.box {
background: #CC333F;
color: white;
position: absolute;
bottom: 0;
}
The issue is that the .box seems to be displaying as inline-block instead of taking the full width available on the page. It stops right where the paragraph ends.