I would like to place an image that extends outside of the top and bottom boundaries of a <div>.
I attached an image describing what I mean.
How would I accomplish this? Should I stick the image in another <div>?

Probably the best way to do that is with absolute positioning and setting the image to have a high z-index.

Can I be so humble to ask for an example?

Hi Matt,
I have done website with similar effect and I use following code for this.

css

#header{ 
   position:relative; 
   height:350px; }
#logo{     
    position:absolute; 
    top:0; 
    left:25px; 
    z-index:99; 
    padding-top: 10px;
    width:180px;
    height:150px; 
    background-color:#FFFFFF;
    border:1px solid #ddd;
    border-top:none;    
    text-align:center;}

html

<div id="header">

<div id="logo"><a href="index.html"><img src="img/logo.jpg" alt="Logo" /></a></div>

</div>

Logo is the element over the header.

Hope it will help you.

Good luck,
anita@sadurska.com

thank you

only problem with that is the image is a transparent gif
the div is centered horizontally between two adjacent divs (above and below) that have different colored backgrounds (same gray color). Won't the #logo div id take the background color of the parent div it's within?

just left out background color.
it actually works in IE, surprising
thanks (talkupation given)