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

<STYLE TYPE="text/css">
<!--
   BODY {
      background-image:素材のURL;
      background-position:0% 100%;
      background-repeat:no-repeat;
      background-attachment:fixed;
    }
-->
</STYLE>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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になります。
    • good
    • 0

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


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

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

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

----------
<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
    • good
    • 0

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



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

そのほかには、ページ全体を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 …);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つの画像を別々の所に指定することって可能なのでしょうか?

補足日時:2001/12/11 05:59
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qはがきの大きさの背景イラストを無料でダウンロードしたい!!

こんばんわ

最近、はがきにて懸賞に応募しているのですが、
白地のはがきに黒のボールペンで書いても味気ないので
PCで背景を印刷してから応募内容を書いて見ようと思いますが。。。

うまく無料でダウンロードできて「はがき大の背景イラスト」なのが
見つかりません。
どなたか詳しい方いらっしゃいましたらよろしくお願いします

Aベストアンサー

イラストではないですが、こちらのサイトの左下にある「背景」は使えると思いますよ。
「ファミリー」「フォーマル」「和風」と種類があります。
年賀状用のサイトなのですが「背景」には文字が入っていないので、いろいろな使い方ができると思います。
http://cp.c-ij.com/japan/otasuke/nenga/

QCSS:

CSS:<ul>と<li>の間に<!--と-->を入れても、Dreamweaverでソースフォーマットの適用をおこなうとソースの改行が自動的に変わてしまうので、ナビゲーションの並びが崩れてしまいます。
適用は必要なので困っております。
ナビゲーションが崩れないほかの方法はないものでしょうか?

Aベストアンサー

> 現象が見られなかったということですが、ごめんなさい、私が間違っておりました。
> リストでGlobalNavigationをつくる場合、横並びにしたときだけ勝手に改行される話でした!
> 今回は縦並びなので関係ありませんでしたね!

えーと…"#hdr-nv li"で"display:inline;"と定義されていますので、「縦並び」にはならない筈ですが?
どうも状況がよく飲み込めませんが、問題があったのは"#hdr-nv"ではなく、別スレッドでポストされている"#nv-global"まわりのことだった、ということでしょうか。

まあいずれにせよ多分 http://oshiete1.goo.ne.jp/qa3900200.html スレッドの方で解決策を得られているかと思いますので、本件は終了ということですね。

蛇足ですが:

> ただ、リストのGlobalNaviを横並びに配置したときは本当になるんです。
> コメントタグをつけて改行無しで<li>から</li>までを記述しないと
> ナビゲーション画像群が途中で改行してしまうんです。
> Dreamweaverの例の処理をしてしまうと、一行で記述していても勝手に改行させて整形されてしまうので問題となる、という話です。

その場合は先程回答した様に、<li>を横並びにする手段を"display: inline;"ではなく(displayは初期値のblockのまま)"float: left;"で置き換えれば、コードの改行の有無(</li>と次の<li>の間でも、<li>とその子要素の<img>の間でも)に関係なく余分な隙間はできなくなりますから、フォーマットの適用をしたとしても問題はなくなると思います。

> 現象が見られなかったということですが、ごめんなさい、私が間違っておりました。
> リストでGlobalNavigationをつくる場合、横並びにしたときだけ勝手に改行される話でした!
> 今回は縦並びなので関係ありませんでしたね!

えーと…"#hdr-nv li"で"display:inline;"と定義されていますので、「縦並び」にはならない筈ですが?
どうも状況がよく飲み込めませんが、問題があったのは"#hdr-nv"ではなく、別スレッドでポストされている"#nv-global"まわりのことだった、ということでしょうか。

まあいずれ...続きを読む

Qフリーのイラストを集めたいのですが、背景が邪魔です

無料の素材サイトから、人物や物(電話機、自動車など)のイラストを集めたいのですが、背景が邪魔です。

素材集では、ほとんどの素材の背景は白になっていると思いますが、背景がクリア(無色)の素材はどこかにありますか?

それとも、やはり、一つずつ切り抜いていかなければならないのでしょうか?

Aベストアンサー

こんにちは。

時々フリーの素材サイトでも、透過ファイルで提供しているサイトがありますよ。
下記はいずれも、商用利用・加工可能です。

http://www.emstudio.jp/
http://sozaizchi.com/index.html
http://sozai.7gates.net/info/kiyaku.html


ちなみに、Photoshopですと、次の方法で背景を削除できます。

1.背景色が1色の場合
 自動選択ツールで背景をどこか選択 → 削除

2.背景が複雑な場合
 フィルタメニュー→抽出、で画像全体を選択


他にもいろいろな方法で画像のみ、残すことができます。

下記のようなサイトもありますので、ご参考まで。
http://www.dougamanual.net/photoshop.html

Q~ の中に