Art.Kaede・HOME> イラスト素材一覧> 固定背景設置方法>

固定背景の設置方法

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

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の部分は背景全体の色です。
こちらのカラーコード表を参考にお好みの色に変更してください。
「Art.Kaede」の固定背景用の素材にはこのカラーコードを素材別に表記しておりますので、
その色を書き込んでください。

Art.Kaede・HOME> イラスト素材一覧> 固定背景設置方法>