Can background image extend beyond div's borders?

Question

Can background image extend beyond div's borders? Does overflow: visible apply to this?

Answer 1

No, a background can't go beyond the edge of an element.

The overflow style controls how the element reacts when the content is larger than the specified size of the element.

However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.

Answer 2

Following up on kijin's advice, I'd like to share my solution for image offsets:

/**    * Only effective cross-browser method to offset image out of bounds of container AFAIK,    * is to set as background image on div and apply matching margin/padding offsets:   */  #logo {   margin:-50px auto 0 auto;   padding:50px 0 0 0;   width:200px;   height:200px;   background:url(../images/logo.png) no-repeat; } 

I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)