CODEWITHSUNDEEP
imagehtmlbackgroundoverflow
Jeroen
Jeroen

Reputation: 135

DIV background-image overflow

I have a DIV element with a background-image, and I want it to overflow outside the dimensions of the DIV (it now cuts off the image because the image is bigger than the DIV).

Is this possible? overflow:visible doesn't work!

Upvotes: 6

Views: 10049

Answers (3)

Chris Coppenbarger
Chris Coppenbarger

Reputation: 116

It is very possible with CSS3. I stumbled on this post while attempting this myself and discovered I could do it.

Here's the code I used:

#page
{
  width:1024px;
  height:662px;
  padding:0 58px 105px 58px;
  background-image:url(../images/milk_splash.png), url(../images/content_back.png);
  background-size: 1082px 767px, 1024px 662px;
  background-origin:padding-box, content-box;
  background-repeat:no-repeat, no-repeat;
  background-position:top left, top left;
}

Your images will layer down in the order you put them in. Your padding is the offset difference in size from your div.

I discovered this and just had to share it. Will not work in IE <9.

Upvotes: 1

vaxxis
vaxxis

Reputation: 253

You can do it in alternative way:

#box {
    margin:-50px 0 0;
    padding:50px 0 0 0;
    background:url(/images/image.png) no-repeat;
}

Upvotes: 7

SLaks
SLaks

Reputation: 887767

Put the background on a larger <div> that contains your <div>.

Upvotes: 6

Related Questions