ヘッダーからフッターまでのコンテンツ部分全体を含むdivの設定です。
このdivではページの幅、センター配置、ページ全体の周囲のライン、ページのメインコンテンツ部分の背景画像の設定をしています。
実際の設定
width:825px;
margin:5px;
margin-right:auto;
margin-left:auto;
padding:0px;
font-size:12px;
border-color: #0000FF;
border-width:1px;
border-style:solid;
background-color:#FFFFFF;
background-image:url(背景画像のアドレス);
background-position:0px 0px;
background-repeat:repeat-y;
この設定で、サイト制作の初期の頃に困ったのが背景画像の設定です。
当サイトのメインコンテンツ部分の左右のカラムとの間にあるラインですが、これは背景画像をy方向にリピートさせて表現しています。
そこで印刷した場合や一部のブラウザでは背景画像がずれてしまう事がありました。
最終的に、background-positionの設定をする事で正しい位置に表示させることができるようになりました。
- サイト