css - 流動的なレイアウトの背景100％幅、両側に50pxのパディング

Question

さて、100％繰り返すために背景画像を追加する必要がありますが、両側に余白を付ける必要があります。

******************************************
*    *                              *    *
* 50 *                              * 50 *
* px * This background image should * px *
*    * repeat-x 100% minus 100px.   *    *
*    *                              *    *
******************************************

Answer 1

div内でdivを使用します。そうすれば、背景を 2 番目の div に適用し、最初の div に余白を心配させることができます。

#div1 {
    margin: 0 50px;
}

#div2 {
    background: url('XXX') no-repeat;
    background-size: 100% 100%;
}

注意: background-size は CSS3 プロパティであり、IE9 以降、Firefox 4 以降、Opera、Chrome、および Safari 5 以降でサポートされています。

または、次を使用します。

#div {
    background: url('XXX') repeat-x;
    margin: 0 50px;
}

背景が色/パターンであるか画像であるかに応じて、どちらが最適なソリューションであるかはわかりません。画像でない場合は、後者のソリューションを使用してください。