Extend a background into the margin

问题

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.

回答1:

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/14026643/extend-a-background-into-the-margin