- 締切済み
2つ画像を背景にするスタイルシートってある？
1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？ <STYLE TYPE="text/css"> <!-- BODY { background-image:素材のURL; background-position:0% 100%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE>
- aki_nemoto
- お礼率11% (1/9)
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- daicham_in_okym
- ベストアンサー率50% (3/6)
No.2の補足です。 画像の大きさが、高さＡピクセル、横幅Ｂピクセルの場合、 top : expression((document.body.clientHeight-Ａ)*Ｘ); left : expression((document.body.clientWidth-Ｂ)*Ｙ); で、Ｘ・Ｙはそれぞれ、ｘ座標・ｙ座標の全体座標に対する割合です。 だから、真ん中に画像を配置する場合は、Ｘ・Ｙともに０．５となります。 左下隅に配置する場合は、Ｘは０で、Ｙは１になります。
- daicham_in_okym
- ベストアンサー率50% (3/6)
普通の画像を背景っぽく使う方法ではどうでしょう。 スタイルの中のz-indexという要素で、画像を本文より奥に配置しています。 画像の置く場所の指定ですが、 document.body.clientHeightなどでウィンドウサイズを取得して 画像の高さ・幅（下の例では１３０）を引くことによって、相対座標を指定できます。 下の例はおそらくＩＥ５以降でしか使えません ＩＥ４ではもうちょっと方法が面倒くさくなるみたいです。 ネットスケープはわかりません。 ---------- <img src="http://www.okweb.ne.jp/images/okweb_logo32c_130w.gif" style="position:absolute;top:0;left:0;z-index:-1;"> <img src="http://www.okweb.ne.jp/images/okweb_logo32c_130w.gif" style="position:absolute;top:expression(document.body.clientHeight-130);left:expression(document.body.clientWidth-130);z-index:-1;"> 本文本文～本文本文はいらんかね～ ----------
- zoh
- ベストアンサー率34% (273/789)
「二つの画像を並べて背景にしたい」と言う事ですよね。 それならば、画像を加工するソフトを使った方が早いような気がします。フリーウェアでも沢山ありますので、探してみてください。 そのほかには、ページ全体を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.gif);background-repeat : no-repeat;" valign="top">こんな感じですか？</TD> </TR> <TR> <TD width="100%" height="50%" style="background-image : url(http://img.yahoo.co.jp/images/main7.gif);background-repeat : no-repeat;" valign="top">きっとこんな感じですよね？</TD> </TR> </TBODY> </TABLE> </BODY> </HTML> -------------
補足
すみません説明不足でした。 並べて画像を背景にするのではなく、2つの画像を置く場所を指定したいのです。例えば1つ目は右上で、2つ目は左下みたいに置くことは無理でしょうか？ 結構こまかく場所を設定したかったので、スタイルシートの場所指定のところ（50％ 80％みたいな感じ）で2つの画像を別々の所に指定することって可能なのでしょうか？
補足
ありがとうございます。できることはできたんですが、画像の位置を変えるには下記の記述の130をいじってみたらできたんですけど、規則性がわからなくて画像が思うような所に配置できないので、その辺の所教えて下さい。何度もすみません。 style="position:absolute;top:expression(document.body.clientHeight-130);left:expression(document.body.clientWidth-130);z-index:-1;">