How to get an image to spill over the edge of a div

Question

So, I'm getting married. Hooray!

I'm building a website for the event and HTML/CSS isn't my normal area of expertise.

I've got the site sliced and diced, and most of the important structure laid out in divs.

One thing I'm not sure of though, is that the design calls for an image to spill over both edges of the wrapper. What's the best way to do that in HTML/CSS? Or should I make the wrapper the full image width wide and make another container inside for the other content?

Thanks for your help!

• Here's the design comp: website_comp.jpg
• Here's the image that needs to spill over the div: ribbon.png
• Here's what the site looks like now: DierksAndEmster.com

Answer 1

add position:relative and overflow:visible for your #container. Then modify your menu like the following:

#menu {
    background: url("http://www.dierksandemster.com/wp/wp-content/themes/et-starter-1-4/images/ribbon.png") repeat scroll 0 0 transparent;
    color: black;
    display: block;
    float: left;
    font-family: 'Walter Turncoat',arial,serif;
    font-size: 20px;
    height: 93px;
    left: -71px;
    line-height: 22px;
    position: absolute;
    width: 942px;
}

Answer 2

You could attempt to position the image with position: absolute. Another way could be to use three columns. (~50px wide left column, main area, ~50px wide right column).

You could also take a look how csswizardry has done this, it's a bit advanced though, but might be helpful: http://csswizardry.com/demos/css-powered-ribbons/

Last but not least, if you wan't to be quick and know the navigation panel that has the fancy ribbons never changes place, why not just make a big background image and build the site on top of it? :)