Question

I have the following CSS, What i”m trying to do is have the background smaller than the foreground so the the foreground looks as if it is bursting out of the edges.

header.png and center.png have greater widths than the background, but they themselves have to be background images as they will have text layered on top.

Now i’ve tried using Z-index, but for some reason the foreground images still keep shifting 42px to the right, I then positioned the foreground images via left:-42px; and the text that would sit within the foreground divs would not position where I would like it to. So the CSS below has been reset to my default.

#wrapper {  /* Used for centering the webpage */
    width: 1044px;
    display: block;
    margin: 0 auto;
}

#container { /* Used for background image */
    width: 960px;
    display: block;
    margin: 0 auto;
    overflow: auto;
    backgorund: url(images/bg.png)
} 

/* Foreground Images */

h1 {
    width: 1044px;
    height: 196px;
    display: block;
    margin: 0 auto;
    background: url(images/header.png) no-repeat center;
}

#center_piece {
    width: 1044px;
    height: 492px;
    display: block;
    margin: 0 auto;
    background: url(images/center.png) no-repeat center;
}

Answer 1

One possible solution is to wrap each “burst piece” in a relatively-positioned element, and then making your h1 and #center_piece absolutely positioned within it.

Demo: http://jsfiddle.net/KZeuN/

HTML:

<div id="wrapper">
    <div id="container">
        <div id="h1_origin">
            <h1>H1</h1>
        </div>
        <div id="center_piece_origin">
            <div id="center_piece">
                Center Piece
            </div>
        </div>
    </div>
</div>

CSS:

#wrapper {  /* Used for centering the webpage */
    width: 1044px;
    display: block;
    margin: 0 auto;
}

#container { /* Used for background image */
    width: 960px;
    display: block;
    margin: 0 auto;
    /* remove overflow: auto; */
    background: url(images/bg.png)


}

/* Foreground Images */

h1 {
    width: 1044px;
    height: 196px;
    display: block;
    margin: 0 auto;
    background: url(images/header.png) no-repeat center;
    position: absolute;
    top: 0; /* Adjust */
    left: -25px; /* Adjust */
}

#center_piece {
    width: 1044px;
    height: 492px;
    display: block;
    /* remove margin: 0 auto; */
    background: url(images/center.png) no-repeat center;
    position: absolute;
    top: 0; /* Adjust */
    left: -25px; /* Adjust */
}

#h1_origin {
    position: relative;
    height: 50px; /* Adjust */
}

#center_piece_origin {
    position: relative;
    height: 50px; /* Adjust */
}