Extend a background into the margin

Question

I have a <div> element that has a 10 pixel margin, as shown in the code below. My question is rather simple: how do I extend the background image into the margin? I tried using the CSS3 background-clip and background-origin sub-atributes, but they have no option for extending a background into the margin.

CSS:

#pagesidebar
{
    background-image:url('/Users/bagavatu/images/background.png');
    margin:10px;
}

HTML:

<div id="pagesidebar">Hello</div>

I know I could append the pagesidebar div into a parent div, and simpyl apply the background-image there, but I would prefer a solution not requiring a new div.

Answer 1

You should be able to do it with a combination of background-size and background-position

Answer 2

The background is relative to your div, not to margins, use paddings instead.

Answer 3

Switch margin: 10px to padding: 10px and it should do the trick.