Fundo de layout fluido 100% de largura com preenchimento de 50px em cada lado - css

Ok, então preciso adicionar uma imagem de fundo para repetir 100%, mas preciso de margens em cada lado.

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

Respostas:

Eu usaria um div dentro do div. Dessa forma, você pode aplicar o segundo plano ao segundo div e deixar que o primeiro div se preocupe com a margem.

#div1 {
margin: 0 50px;
}

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

Tenha em atenção que: background-size é uma propriedade CSS3 e é suportado no IE9 +, no Firefox 4+, no Opera, no Chrome e no Safari 5+.

Como alternativa, use:

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

Não é uma boa prática e não tenho certeza qual é a melhor solução, dependendo se o plano de fundo é uma cor / padrão ou uma imagem. Use a última solução se não for uma imagem.