Coding Architecture

下記のように背景画像を指定すると、ブラウザを小さくしたときにくずれる

<div id="document">
<div id="banner">banner</div>
<div id="main">main<div>
<div id="contentinfo">contentinfo<div>
<div>


#banner,#main,#contentinfo {
width:1000px;
margin:0 auto;
text-align:left;
}
#document {
width:100%;
margin:0 auto;
text-align:left;
background:transparent url(test.jpg) no-repeat top center;
}

#documentの中にdivを追加して背景を指定すると表示がくずれない。

<div id="document">
<div id="content">
<div id="banner">banner</div>
<div id="main">main<div>
<div id="contentinfo">contentinfo<div>
<div>
<div>


#banner,#main,#contentinfo {
width:1000px;
margin:0 auto;
text-align:left;
}
#document {
width:100%;
margin:0 auto;
text-align:left;
}

#content{
width:1000px;
margin:0 auto;
}

#document ,
#content{
background:transparent url(test.jpg) no-repeat top center;
}