CODEWITHSUNDEEP
cssimagehtml
Yarin
Yarin

Reputation: 183699

Can background image extend beyond div's borders?

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

Upvotes: 43

Views: 74701

Answers (7)

Yarin
Yarin

Reputation: 183699

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

Upvotes: 30

SleBluue
SleBluue

Reputation: 277

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;
}

Upvotes: 2

fahd4007
fahd4007

Reputation: 544

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 enter image description here

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/

Upvotes: 11

kijin
kijin

Reputation: 8910

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.

Upvotes: 9

Brad Mace
Brad Mace

Reputation: 27886

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.

Upvotes: 0

Guffa
Guffa

Reputation: 700512

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.

Upvotes: 32

Šime Vidas
Šime Vidas

Reputation: 185943

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

Upvotes: -2

Related Questions