NN-Factory > HTML Tips > 背景の固定

背景を固定した位置に表示させる。

大き目の画像をページに１つだけ表示させてあるページを目にしたことありませんか？
サンプルということで、このページの背景を右下に固定してあります。
ここでは、その方法をご紹介します。
下のタグを<head>　</head>の中にコピペしてお使いください。
赤の文字の所は、背景に使いたいファイル名に直してくださいね！
　
　
<style type="text/css">
<!--
body{ background-image:url(matoricaria.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 100%; }
-->
</style>
　
　 　

　上のソースの説明
background-image: url(○○) 画像名の所に背景に使いたい画像の名前を入れます。
background-repeat: repeat 縦横に繰り返して表示
repeat-x 横方向に繰り返して表示（ページの上だけに表示する時などに）
repeat-y
 縦方向に繰り返して表示（ページの左側だけに表示したい時など）
no-repeat 繰り返しなしで、１つだけ表示
background-attachment: fixed 背景画像の位置を固定する。
scroll 背景画像をページ内容と一緒にスクロールする。
background-position: left = 0% 100% 100%とか、right bottomのように「横位置・縦位置」の順に半角スペースで区切って指定します。
right =100%
center =50%
top = 0%
bottom = 100%
　

<<BACK　　NEXT>>