背景画像固定のＨＴＭＬ


≪背景固定≫　≪右上≫　≪右下≫　≪左上≫　≪左下≫　≪中央≫

≪上一列≫　≪下一列≫　≪右一列≫　≪左一列≫



背景画像を固定するには！

bgProperties="fixed"を<BODY>に追加してください。

例）<BODY background="○○.jpg" bgProperties="fixed">



▲top

場所指定して固定するには
下のソースを<HEAD> 〜 </HEAD>の間に入れてください。


<STYLE type="text/css">
<!--
BODY {
background-image : url(○○.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position:100までの数字% 100まで数字%;
background-color: #背景色;
}
-->
</STYLE>


位置を指定

background-position:100までの数字% 100まで数字%;
100までの数字を変更してください。


左上に固定 : 0% 0%
左下に固定 : 0% 100%
右下に固定 : 100% 100%
右上に固定 : 100% 0%
中央に固定 : 50% 50%

％の数字を変えると、微妙な位置の調整ができます。


▲top

画像を【中央】に固定するには！

<STYLE type="text/css">
<!--
BODY {
background-image : url(○○.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position:50% 50%;
background-color: #背景色;
}
-->
</STYLE>


画像を【上一列】に固定するには！

<STYLE type="text/css">
<!--
BODY {
background-image : url(○○.jpg);
background-attachment: fixed;
background-repeat: repeat-x;
background-color: #背景色;
}
-->
</STYLE>


▲top

画像を【下一列】に固定するには！

<STYLE type="text/css">
<!--
BODY {
background-image : url(○○.jpg);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: bottom;
background-color: #背景色;
}
-->
</STYLE>


画像を【右一列】に固定するには！

<STYLE type="text/css">
<!--
BODY {
background-image : url(○○.jpg);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: right;
background-color: #背景色;
}
-->
</STYLE>


▲top

画像を【左一列】に固定するには！

<STYLE type="text/css">
<!--
BODY {
background-image : url(○○.jpg);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: left;
background-color: #背景色;
}
-->
</STYLE>



補足・背景色

background-color: #背景色;

白背景　# ffffff

黒背景　# 000000

その他の色　数字を変更してください。

▲top