固定背景の設置方法

スタイルシートというタグを埋め込みます。

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本館


コンテンツのトップ 次のページ
カーラーコード