2-1 壁紙を固定する方法
よく使用する物をピックアップしております。このままコピーアンドペーストしてご使用下さいませ。
見本では背景の色合いを #ffffff; (白)に、
画像部分は(★.gif) にしております。適時お使いの環境に合わせて設定して下さい。
#ffffff; (白) → #ffcc99; (薄いオレンジ)に
(★.gif) → (abc.jpg) や (img/lmn.gif)など。
変更される際に誤ってコロン[:]やセミコロン[;]を消さないように気をつけて下さい。 (エラーを起こす元になります)
- 動作は全てWinのIE6.0、NN7.1、OPERA7.5、Firefox1.5.0.1で確認済みです。
-
壁紙の固定(background-attachment部分)は
ブラウザによっては認識致しません。(NN6.0からはOKですが、NN4.7では認識致しません)
[ 関連事項 : HP-TIPS > CSS > スタイルシートによる背景指定の基本 ]
[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
右上に固定
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : no-repeat ;
background-position : right top ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 100% 0% ; でもOKです。
右下に固定
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : no-repeat ;
background-position : right bottom ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 100% 100% ; でもOKです。
左上に固定
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : no-repeat ;
background-position : left top ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 0% 0% ; でもOKです。
左下に固定
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : no-repeat ;
background-position : left bottom ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 0% 100% ; でもOKです。
真ん中に固定
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : no-repeat ;
background-position : center ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 50% 50% ; でもOKです。
左側の縦にリピート
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : repeat-y ;
background-position : left top ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 0% 0%; でもOKです。
右側の縦にリピート
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : repeat-y ;
background-position : right top ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 100% 0% ; でもOKです。
上一列にリピート
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : repeat-x ;
background-position : left top ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 0% 0% ; でもOKです。
下一列にリピート
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
background-color : #ffffff ;
background-image : url(★.gif) ;
background-repeat : repeat-x ;
background-position : left bottom ;
background-attachment : fixed ; }
-->
</style>
※ 勿論、background-position : 0% 100% ; でもOKです。