背景画像スタイル

次は背景画像を追加し、幅を840pxに固定します。次のコードをCSSに追加し、リフレッシュしてください。

/* The background + logo styles */
body {
    background: url(bg_light.gif);
    width: 840px;
    margin: auto;
}

#visual-portal-wrapper {
    margin: 20px;
    background-color: white;
    padding: 0 20px 20px 20px;
}

#portal-logo {
    display: block;
    margin-bottom: 2em;
}

注意して欲しいのは「margin:auto」の部分です。これはCSSにおいて、一般にセンタリングするための方法です（多くの人はコレを知りません。そして「float:center」などでこれを実現しようとします）。これで実現の方法がわかりましたね。リフレッシュすると次のようになるでしょう。

おー、デザインに背景が追加されました。どんどんいきましょう。