固定背景の設置方法
スタイルシートというタグを埋め込みます。
IEをお使いの方は表示からソースを表示でソースを表示します。
ソースは別窓でテキストファイルが表示されます
<HEAD>と</HEAD>の間に下記のタグを埋め込みます
HTMLファイルと画像のフォルダが一緒の場合です。
もし、HTMLファイルと画像フォルダが別の場合
__________________________________________________________________________________________________________________
HTMLファイルがhtmlというフォルダにあり画像がgazouというフォルダにある場合は
../gazou/画像.gif
となります。
＜断層＞
HPファイル格納フォルダ
|
|---HTMLフォルダ/HTMLファイル
|---gazouフォルダ/画像.gif
__________________________________________________________________________________________________________________
HTMLがファイルはフォルダになく画像だけがgazouというフォルダにある場合は
gazou/画像.gif
になります。
＜断層＞
HPファイル格納フォルダ/HTMLファイル
|
|---gazouフォルダ/画像.gif
__________________________________________________________________________________________________________________
＝＝＝記＝＝＝
左上に「画像.gif」という画像を置く場合
<STYLE type="text/css">
<!--
BODY {
background-image : url("画像.gif");
background-attachment: fixed;
background-position: 0% 0%;
background-repeat: no-repeat;
background-color:#FFFFFF;
}
-->
</STYLE>
左下の場合
<STYLE type="text/css">
<!--
BODY {
background-image : url("画像.gif");
background-attachment: fixed;
background-position: 0% 100%;
background-repeat: no-repeat;
background-color:#FFFFFF;
}
-->
</STYLE>
右上の場合
<STYLE type="text/css">
<!--
BODY {
background-image : url("画像.gif");
background-attachment: fixed;
background-position: 100% 0%;
background-repeat: no-repeat;
background-color:#FFFFFF;
}
-->
</STYLE>
右下の場合
<STYLE type="text/css">
<!--
BODY {
background-image : url("画像.gif");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
background-color:#FFFFFF;
}
-->
</STYLE>
左に縦一列に並べる場合
<style type="text/css">
<!--
BODY {
background-image : url("画像.gif");
background-attachment: fixed;
background-position: 0% 0%;
background-repeat: repeat-y;
background-color:#FFFFFF;
}
-->
</style>
右に縦一列に並べる場合
<style type="text/css">
<!--
BODY {
background-image : url("画像.gif");
background-attachment: fixed;
background-position: 100% 0%;
background-repeat: repeat-y;
background-color:#FFFFFF;
}
-->
</style>
上に横一列に並べる場合
<style type="text/css">
<!--
BODY {
background-image : url("画像.gif");
background-position: 0% 0%;
background-attachment: fixed;
background-repeat: repeat-x;
background-color:#FFFFFF;
}
-->
</style>
下に横一列に並べる場合
<style type="text/css">
<!--
BODY {
background-image : url("画像.gif");
background-position: 100% 100%;
background-attachment: fixed;
background-repeat: repeat-x;
background-color:#FFFFFF;
}
-->
</style>
上記の#FFFFFFの部分は背景全体の色です。
こちらのカラーコード表を参考にお好みの色に変更してください。
イラスト色彩館TOP***フリー素材Art.Kaede本館