OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
締切り
済み

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

  • 暇なときにでも
  • 質問No.183169
  • 閲覧数466
  • ありがとう数1
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 11% (1/9)

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

<STYLE TYPE="text/css">
<!--
   BODY {
      background-image:素材のURL;
      background-position:0% 100%;
      background-repeat:no-repeat;
      background-attachment:fixed;
    }
-->
</STYLE>
通報する
  • 回答数3
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全3件)

  • 回答No.1
レベル12

ベストアンサー率 34% (273/789)

「二つの画像を並べて背景にしたい」と言う事ですよね。 それならば、画像を加工するソフトを使った方が早いような気がします。フリーウェアでも沢山ありますので、探してみてください。 そのほかには、ページ全体をTableにして、セルに背景として入れるというのもありですが。 ------------- <HTML> <BODY> <TABLE border=&q ...続きを読む
「二つの画像を並べて背景にしたい」と言う事ですよね。

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

そのほかには、ページ全体を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>
-------------
補足コメント
aki_nemoto

お礼率 11% (1/9)

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

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

結構こまかく場所を設定したかったので、スタイルシートの場所指定のところ(50% 80%みたいな感じ)で2つの画像を別々の所に指定することって可能なのでしょうか?
投稿日時 - 2001-12-11 05:59:10


  • 回答No.2
レベル6

ベストアンサー率 50% (3/6)

普通の画像を背景っぽく使う方法ではどうでしょう。 スタイルの中のz-indexという要素で、画像を本文より奥に配置しています。 画像の置く場所の指定ですが、 document.body.clientHeightなどでウィンドウサイズを取得して 画像の高さ・幅(下の例では130)を引くことによって、相対座標を指定できます。 下の例はおそらくIE5以降でしか使えません IE4ではもうちょっ ...続きを読む
普通の画像を背景っぽく使う方法ではどうでしょう。
スタイルの中のz-indexという要素で、画像を本文より奥に配置しています。

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

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

----------
<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;">
本文本文~本文本文はいらんかね~
----------
補足コメント
aki_nemoto

お礼率 11% (1/9)

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

style="position:absolute;top:expression(document.body.clientHeight-130);left:expression(document.body.clientWidth-130);z-index:-1;">
投稿日時 - 2001-12-11 13:24:06
  • 回答No.3
レベル6

ベストアンサー率 50% (3/6)

No.2の補足です。 画像の大きさが、高さAピクセル、横幅Bピクセルの場合、 top : expression((document.body.clientHeight-A)*X); left : expression((document.body.clientWidth-B)*Y); で、X・Yはそれぞれ、x座標・y座標の全体座標に対する割合です。 だから、真ん中に画像を配置する場合は、 ...続きを読む
No.2の補足です。
画像の大きさが、高さAピクセル、横幅Bピクセルの場合、

top : expression((document.body.clientHeight-A)*X);
left : expression((document.body.clientWidth-B)*Y);

で、X・Yはそれぞれ、x座標・y座標の全体座標に対する割合です。
だから、真ん中に画像を配置する場合は、X・Yともに0.5となります。
左下隅に配置する場合は、Xは0で、Yは1になります。
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ