how to override main containers max-width using css - css

Question

I'm working on a wordpress blog template, which has a main container:
.container {
width: 100%;
max-width: 1040px;
On one page I need to have an image, that will be a full size background image: 100% of available width. But no matter what I do, I can't get the image to go outside of the template main container (1040px). Any ideas?

Answer 1

While its possible using absolute positioning to get an image outside the container it was made in, why would you want to do that when you can just use CSS backgrounds!
So I'm assuming you have a container inside a bigger container.... what you want to do is set the image to be the background of the bigger container like this (i'm doing this assuming the container it is in is the whole page... but it can be any div) :
html {
background: url(YOURIMAGE.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Edit Ok I see what you want to do. You want a nested div to have 100% page width right?
#wrapper {
width: 100px;
margin-left: auto;
margin-right: auto;
}
.item {
height: 300px;
background-color:#0000FF;
width:100%;
}
.fullblock {
position: absolute;
width: 100%;
z-index: -1;
background-color: #FF0000;
height:300px;
left:0;
right:0;
}
<div id="wrapper">
<div class="item">
<div class="fullblock">
</div>
</div>
</div>
This will allow your nested div to burst out of its container.