« iPod Touch のガラス強度はいくつ? | メイン | Last.fm 始めました。 »

body の background で表示位置(左右)を調整

ホームページの背景に画像を指定した場合、左上を頂点にリピートしてしまいます。
同様に、repeat-x, repeat-y でも左上を頂点にそれぞれの方向にリピートしてしまいす。
タイルパターンならいいかもしれませんが、背景画像に、縦ストライプの左右2色別け画像をセンタリングで表示したいなんて時には普通の指定では合わせようがありません。
そこで、CSSで下記の様に記述すると背景画像をセンタリンクできます。

body {
background: url(images/back.gif) repeat-y 50% 50%;
}
最後の「50% 50%」の比率を変える事でセンター位置をずらす事ができます。
作成する背景画像は横に長いものを用意しておきましょう。

Category: CSS   Tag: CSS

Sponsor Link