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, 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 2

I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.

footer{
 background-color: transparent!important;
 top: -50px;
 margin-bottom: -50px;
}

Answer 3

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 4

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

Answer 5

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 6

not possible to set a background image 'outside' it's element,

BUT YOU CAN DO what you want with using 'PSEUDO' element and make that whatever size you want and position it wherever you want. see here : i have set the arrow outside the span

here is the code

HTML :

<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>

strong text

 .tooltip{position:relative; float:left;}
    .tooltip .msg {font-size:12px;
        background-color:#fff9ea;
        border:2px #e1ca82 solid;
        border-radius:5px;
        background-position:left;
        position:absolute;
        padding:4px 5px 4px 10px;
        top:0%; left:104%;
        z-index:9000; position:absolute; max-width:250px;clear:both;
    min-width:150px;}


    .tooltip .msg:before {
        background:url(tool_tip.png);
        background-repeat:no-repeat;
    content: " ";
        display: block;
        height: 20px;
        position: absolute;
        left:-10px; top:1px;
        width: 20px;
        z-index: -1;
        }

see here example: http://jsfiddle.net/568Zy/11/