2つ画像を背景にするスタイルシートってある？

締切済

質問者：aki_nemoto
質問日時：2001/12/11 03:40
回答数：3件

1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？

<STYLE TYPE="text/css">

</STYLE>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： daicham_in_okym
回答日時：2001/12/11 23:37

No.2の補足です。

画像の大きさが、高さＡピクセル、横幅Ｂピクセルの場合、

top : expression((document.body.clientHeight-Ａ)*Ｘ);
left : expression((document.body.clientWidth-Ｂ)*Ｙ);

で、Ｘ・Ｙはそれぞれ、ｘ座標・ｙ座標の全体座標に対する割合です。
だから、真ん中に画像を配置する場合は、Ｘ・Ｙともに０．５となります。
左下隅に配置する場合は、Ｘは０で、Ｙは１になります。

- 0
- 件

通報する

No.2

回答者： daicham_in_okym
回答日時：2001/12/11 12:18

普通の画像を背景っぽく使う方法ではどうでしょう。

スタイルの中のz-indexという要素で、画像を本文より奥に配置しています。

画像の置く場所の指定ですが、
document.body.clientHeightなどでウィンドウサイズを取得して
画像の高さ・幅（下の例では１３０）を引くことによって、相対座標を指定できます。

下の例はおそらくＩＥ５以降でしか使えません
ＩＥ４ではもうちょっと方法が面倒くさくなるみたいです。
ネットスケープはわかりません。

----------
<img src="http://www.okweb.ne.jp/images/okweb_logo32c_130w … style="position:absolute;top:0;left:0;z-index:-1;">
<img src="http://www.okweb.ne.jp/images/okweb_logo32c_130w … style="position:absolute;top:expression(document.body.clientHeight-130);left:expression(document.body.clientWidth-130);z-index:-1;">
本文本文～本文本文はいらんかね～
----------

この回答への補足

ありがとうございます。できることはできたんですが、画像の位置を変えるには下記の記述の130をいじってみたらできたんですけど、規則性がわからなくて画像が思うような所に配置できないので、その辺の所教えて下さい。何度もすみません。

style="position:absolute;top:expression(document.body.clientHeight-130);left:expression(document.body.clientWidth-130);z-index:-1;">

補足日時：2001/12/11 13:24

通報する

- 0
- 件

通報する

No.1

回答者： zoh
回答日時：2001/12/11 05:51

「二つの画像を並べて背景にしたい」と言う事ですよね。

それならば、画像を加工するソフトを使った方が早いような気がします。フリーウェアでも沢山ありますので、探してみてください。

そのほかには、ページ全体をTableにして、セルに背景として入れるというのもありですが。

-------------
<HTML>
<BODY>
<TABLE border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD width="100%" height="50%" style="background-image : url(http://www.okweb.ne.jp/images/okweb_logo32c_130w … : no-repeat;" valign="top">こんな感じですか？</TD>
</TR>
<TR>
<TD width="100%" height="50%" style="background-image : url(http://img.yahoo.co.jp/images/main7.gif);backgro … : no-repeat;" valign="top">きっとこんな感じですよね？</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
-------------

この回答への補足

すみません説明不足でした。

並べて画像を背景にするのではなく、2つの画像を置く場所を指定したいのです。例えば1つ目は右上で、2つ目は左下みたいに置くことは無理でしょうか？

結構こまかく場所を設定したかったので、スタイルシートの場所指定のところ（50％　80％みたいな感じ）で2つの画像を別々の所に指定することって可能なのでしょうか？

補足日時：2001/12/11 05:59

通報する