一応、ごく簡単に(本当に簡単です・汗)画像の表示方法の一例を書いてみました。
ご存じの方はお時間の無駄になってしまうので読み飛ばしてくださいね。(^^;ゞ
[画像の表示位置指定と固定]
■背景画像の繰り返しを無効にするには<BODY>タグを次のように記述してみてください。
※注意:下記の場合はHTMLファイルと画像が同じディレクトリにあると想定しています。
別のディレクトリに画像を置く場合は必ずそこまでのパスを書いてくださいね。
<BODY STYLE="background-image:url(表示させたい画像);
background-repeat:
no-repeat;
">
これで背景画像を1枚だけ、
ウインドウの左上
に表示することができます。
■次は表示位置を調整してみます。
<BODY STYLE="background-image:url(表示させたい画像);
background-repeat:no-repeat;
background-position:50% 50%
">
これは画像の位置を、
水平位置50%、垂直位置50%
に指定しています。
つまり真ん中ですね。
この数字を変えることによって画像をお好みの位置に調節できます。
また、%での指定ではなくピクセル指定でもいいですし、%指定とピクセル指定がごちゃ混ぜになっていても可能です。
それ以外でtop・bottom・left・right・centerでも上下左右、中心を指定できます。
■今度は画像を繰り返して表示させてみます。
<BODY STYLE="background-image:url(表示させたい画像);
background-repeat:
repeat-x;
">
これで
左上から横方向
にのみ繰り返して表示されます。
これに上記した<background-position:50% 50%;">で天地の位置の指定ができます。
repeat-xを
repeat-y
とすると
縦方向
のみの繰り返しとなり こちらも<background-position:50% 50%;">で左右の位置が指定できます。 数字を変えて確かめてみてくださいね。
同じく、top・bottom・left・right・centerでも上下左右、中心を指定できます。
■最後に背景画像を固定してみます。
<BODY STYLE="background-image:url(表示させたい画像);
background-repeat:no-repeat; background-position:50% 50%
fixed;
">
fixedと指定してあげれば背景が固定され、スクロールバーを動かしても背景は動きません。
[一括して指定する方法]
<HEAD>〜</HEAD>内に纏めて指定する方法もあります。
<STYLE TYPE = "text/css">
<!--
body {
background-image:
url(表示させたい画像)
; 画像へのパス
background-repeat:
no-repeat
; 画像の並び方の指定(repeat/repeat-x/repeat-y/no-repeat)
background-position:
left top
; 表示位置指定(top/bottom/left/right/center/%指定でもOK)
background-attachment:
fixed
固定指定 (fixed/scroll)
}
-->
</STYLE>
この時にスタイルシート未対応のブラウザが指定用の文字を表示してしまわないよう、念のため<!-- 〜 -->で囲うようにしてくださいね。
これは一例です。
他にもいろいろな書き方、方法がありますので、ご参考までに。 <(_ _)>
Copyright(c) ju-goya All Rights Reserved.