html - 背景を余白に拡張する

Question

以下のコードに示すように、10 ピクセルの余白を持つ<div>要素があります。私の質問はかなり単純です:背景画像を余白に拡張するにはどうすればよいですか? CSS3background-clipとbackground-originサブ属性を使用してみましたが、背景を余白に拡張するオプションがありません。

CSS:

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

HTML:

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

pagesidebardiv を親 div に追加し、そこに背景画像を単純に適用できることはわかっていますが、新しい div を必要としないソリューションを好むでしょう。

Answer 1

に切り替えるmargin: 10pxとpadding: 10px、うまくいくはずです。

Answer 2

背景は、マージンではなく div に相対的です。代わりにパディングを使用してください。

Answer 3

background-sizeとbackground-positionの組み合わせでできるはずです