Bleeding a background image outside a div

HTML & CSS
1

Hi all,

Quick question: anybody know how to make the background image of a div display outside of the div dimensions?

for eg I have the following div:

<div id="container"></div>

that has the following CSS:


#container {
 width: 800px;
 height: 500px;
 background: url('images/swirl.gif') top 780px no-repeat;
 overflow: visible;
}

and I was kinda hoping that as the swirl.gif was 300px wide, I would get 220px of it showing outside the area of the #container on the right. Even with overflow: visible, this is not the case.

I can achieve the same effect with some absolute positioning and non-sematic markup, but it’s not as elegant.

Anybody have any ideas?

Tx

px

2

A background will always be confined to the container size. You could increase the effective size of the container by applying 220px of right padding.

3

Hum! damn - I was afraid of that!

Nice workaround - will give it a shot! thx!