2-1 壁紙を固定する方法

よく使用する物をピックアップしております。このままコピーアンドペーストしてご使用下さいませ。
見本では背景の色合いを #ffffff; (白)に、 画像部分は(★.gif) にしております。適時お使いの環境に合わせて設定して下さい。

[ 例 ]

#ffffff; (白) → #ffcc99; (薄いオレンジ)に
(★.gif) → (abc.jpg)(img/lmn.gif)など。

変更される際に誤ってコロン[:]やセミコロン[;]を消さないように気をつけて下さい。 (エラーを起こす元になります)

[ 関連事項 : 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です。