MovableType・テンプレート・ブログカスタマイズの小粋なテクニック満載!

 


« 前のページ | HOME | 次のページ »

2006年04月02日

» 背景画像を固定する

背景画像を固定する場合は、CSSの body 要素に
背景画像を指定し、背景画像の指定に対して下記のように
プロパティ background-attachment プロパティを追加します。
このプロパティの値が fixed の場合、画像が固定表示されます。

◆背景画像固定ソース

<style type="text/css">
<!--
body {
background-image: url("画像のURL");
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
--></style>

画像の配置位置は background-position プロパティで指定します。
上のリストでは「右下」を指定していますが、プロパティの値は

水平方向:left(左)/center(中央)/right(右)
垂直方向:top(上)/center(中央)/bottom(下)

のいずれかお好きなものを指定してください
("%"指定等、他の設定方法についてはここでは割愛します)。

また上のサンプルでは background-repeat プロパティで
画像を繰り返し表示しない設定になっています。(no-repeat)
水平方向に繰り返し表示する場合は background-repeat プロパティに
repeat-x を、垂直方向に繰り返し表示する場合は repeat-y を
指定してください。


★ この記事が参考になりましたら投票お願いします。


» 関連記事




» トラックバックURL

トラックバックURL: http://atoria.sakura.ne.jp/mt/mt-tb.cgi/51





» コメントの投稿