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

After a little bit of research: No and No :)

Answer 2

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 3

I tried using negative values for background-position but it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.

Answer 4

No, the background won't extend beyond the borders. But you can stretch the border as far as you want using padding and some clever tweaking of negative margins & position.

Answer 5

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.)