Extend Div past relative container to full width of page - html

Question

I'm trying to extend a div to the width of a browser window and it's wrapped in a relative positioned div.
Here's the HTML markup:
<section class="slider-home">
<div class="overlay"> </div>
<div class="img-product">
<div class="strapbox-product">
<h1>
Farm & Estates
</h1>
</div>
<img src="/assets/img/products/farm-estates.jpg"></img>
</div>
</section>
Here's the code for the container:
.slider-home {
height: 360px;
overflow: hidden;
position: relative;
}
And the code for the division I wish to extend
.overlay {
position: absolute;
width: 100%;
height: 360px;
z-index: 2;
}
Or is it this CSS for this division I have to extend?
.img-product {
height: 360px;
overflow: hidden;
text-align: center;
position: relative;
}
The CSS code for an image (the cows) within the img-product division.
.img-product img {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}
And finally a screenshot of the webpage. The cows and the banner I'd like to extend to the full width of the webpage.

Answer 1

Look into this, may be it might help you.
HTML:
<section class="slider-home">
<div class="overlay"> </div>
<div class="img-product">
<div class="strapbox-product">
<h1>
Farm & Estates
</h1>
</div>
<img src="http://2.bp.blogspot.com/-cr_BxrxmKrE/TfjZlcf8VBI/AAAAAAAAA5g/JPv6K6XhW0c/s1600/34066_457614643272_609613272_5962233_1924402_n.jpg"></img>
</div>
</section>
CSS:
.slider-home,.img-product,.strapbox-product{
width:100%;
position:relative;
}
.strapbox-product h1{
width:100%;
text-align:center;
position:absolute;
top:100px;
z-index:999999;
display:block;
}
.img-product img{
width:100%;
height:100%;
}
.overlay{
width:100%;
height:50px;
background:black;
opacity:0.4;
position:absolute;
top:100px;
z-index:999999;
}
Fiddle Demo