背景固定の方法

  • 下記のタグをソースの<head>〜</head>の中に入れて下さい。
  • このままコピー→貼り付け（ペースト）してご利用下さい。
左上固定の方法 右上固定の方法
<style type="text/css">
<!--
body{
background : url("画像の名前");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;}
-->
</style> 		<style type="text/css">
<!--
body{
background : url("画像の名前");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;}
-->
</style>
左下固定の方法 右下固定の方法
<style type="text/css">
<!--
body{
background : url("画像の名前");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;}
-->
</style> 		<style type="text/css">
<!--
body{
background : url("画像の名前");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;}
-->
</style>
  • 画像の名前には　背景に使いたい画像のURLを記入して下さい。
  • その他にも画像の表示位置 [background-position] を％で指定する方法もあります。
下記を参考にしてみて下さい。
[background-position] を％指定する場合は　background-position : xx % yy % ;で表示します。
xx は横軸・yy は縦軸を表します。
従って
  • 左上固定  …background-position : 0% 0% ;
  • 左下固定  …background-position : 0% 100% ;
  • 右上固定  …background-position : 100% 0% ;
  • 右下固定  …background-position : 100% 100% ;
  • 真ん中   …background-position : 50% 50% ;
となります。
この％の指定を変えることでいろいろな場所に画像を表示させることが可能になります。
Copyright© Niche. All Rights Reserved.