Breaking a background image out of its div

[FrickenTrevor]

Pretty much self explanatory. I have a div that has a background image, but I am trying to use z-index to make that background of the div go behind the content so it "breaks out" of its box and fills up the desired are instead of the little box

[Beverleyh]

Please post a link to your page - its difficult to understand what you're trying to do without an example.

[FrickenTrevor]

Well I dont have a link because it isn't hosted yet, but I have a part of it.


<div id="small-box-container">
<div id="small-box1" class="small-box">Small-Box #1</div>
<div id="small-box2" class="small-box">Small-Box #2</div>
<div id="small-box3" class="small-box">Small-Box #3</div>
</div>

<style>
#small-box-container {
padding: 20px;
width: 300px;
height: 200px;
overflow: hidden;
}

.small-box {
color: #fff;
padding: 10px;
width: 200px;
height: 200px;
margin: 0 0 50px 0;
}
#small-box1 {
background: url("http://wallzpoint.com/wp-content/gallery/cool-background/cool-background_005.jpg") no-repeat;

/* How can I get this to fill the whole page while still maintaining the div structure? */
}
</style>


So it would kind of like having the background of the div be the background of the page. Like instead of having body-background: url(...... the div would replace that background.

[Beverleyh]

You could use one of these methods to put the image into the background: http://css-tricks.com/perfect-full-page-background-image/

I dont understand what the small div has got to do with it though, other than you using the same image as a background for both elements.

If you need more help, please post a link to your page - upload the page to a temporary locations that you can delete afterwards.