..



 ■HomeHomePageTips−背景を固定する

+1JavaScript 無料のフリースクリプト集...

背景を固定する
背景を固定する

 ホームページをスクロールさせても背景が固定されて表示されます。


 ちょい技の方法
1.背景を固定する

 背景を固定するにはスタイルシートの「background-attachment」属性を記述します。<body>〜</body>タグ間に赤字の部分を挿入することで背景を固定することができます。値は「fixed」にすると固定に、「scroll」にするとスク ロールするようになります。

<style type="text/css">
<!--
body{background-attachment:fixed;}
-->
</style>


2.背景の位置を指定する

 背景の画像の位置を指定するには、「background-position」属性を記述します。X座標とY座標の間は半角スペースを空けピクセル単位で指定します。

<style type="text/css">
<!--
body{background-attachment:fixed; background-position:X座標 Y座標; }
-->
</style>


3.背景を繰り返さないで表示する

 背景は通常上下左右に繰り返し表示されますが「background-repeat」属性を記述することで繰り返さないで表示させることもできます。値は「no-repeat」にすると繰り返しなし、「repeat-x」にすると横方向のみ繰り返し、「repeat-y」にすると縦方向のみ繰り返し、「repeat」にすると画面全体に敷き詰められます。

<style type="text/css">
<!--
body{background-attachment:fixed; background-position:X座標 Y座標;
background-repeat:no-repeat;}

-->
</style>

..


..