- ベストアンサー
CSS 同じページに違う画像を同時に表示させるタグ
メモ帳を使ってホームページを作成しているのですが、行き詰ったのでお力お貸しください。 現在はこのような（下に表示）タグを使って、背景の画像1を表示させています。 <style type="text/css"> body{ font-size: 12pt; line-height: 200%; margin-left: 0px; padding-left: 0px; background-image: url(画像1); background-position: right top; background-repeat: no-repeat; background-attachment: fixed; } </style> 今回は、画像1（位置：右上）と同じページに画像2（位置：左下）を表示させたいのです。 画像1のみはきちんと右上に表示されるのですが、画像2も一緒に表示させる方法がわかりません。 様々なサイト様を巡らせて頂きましたが載っておりませんでした。 CSSでは二つの画像を同時に載せることが出来ないのでしょうか。 <IMG src="画像の名前">などで表示させることは可能だと思うのですが、このタグだと（私自身が初心者のため）上に書いたCSSに組み込まれた条件を書き直せる自信がありません。 ホームページ作成に関しては全くの初心者です。 上のCSSも、あるサイト様に書かれてあったのを利用させて頂いております(汗） 素人の質問で申し訳ありませんが、教えて頂けると助かります。 宜しくお願いします。 【あるページ】↓ 要するにこんな感じです。 「￣￣￣￣￣￣￣￣ 画像1 │ │ │ ～文字とか～ │ │ │ 画像2＿＿＿＿＿＿＿＿」
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
お礼を読んでからの回答。前回答者全員の回答が正解です。 上と下とか、コメントしているようなので、設定方法が違うのでしょう。質問のしかたからしてCSSの事を理解している事を前提とした回答なので・・・ エスパー回答してみると CSSの部分とbody内の部分をそれぞれ別として考えてませんか？ body内の<div>とか<p>とかにCSSを設定するので、どちらも両方書きかえしないとダメ・・・ 上を試してダメ、下を試してダメ、じゃなくて、 上と下を同時にコピペで試さないとダメだった訳です。 下記は、一体化してみたのでそのまま全部コピペして表示。 （DOCTYPEは、自分の仕様で） フレームとかブログじゃないよね？ ----------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"><!-- body{ font-size: 12pt; line-height: 200%; margin-left: 0px; padding-left: 0px; background: url(画像1) no-repeat 100% 0 fixed ; } div#aaa{ background: url(画像2) no-repeat 0 100% fixed ; } --></style> </head> <body> <div id="aaa"> <p style="height:1000px;">ここにコンテンツ</p> </div> </body> </html>
その他の回答 (6)
- abril
- ベストアンサー率69% (388/560)
既に色々お答えが出ていますが、理解できるならANo.3の方の方法が一番すっきり（マークアップの入れ子を増やさなくて済む）していて良いと思いますが。 ANo.3様へのレスとして、 > 意味がよく分からなかったです；；意味など調べてはみたのですが・・・ とありますが、これを理解しないでHTML文書作る事自体スタート地点で転んでしまっている様なものです。「DTD」というキーワードでググるなどしてみましたか？「DTD」入れるだけで、まさにトップにその説明（しかもかなり有名なお手本的サイト）が出てきますよ…↓ http://www.kanzaki.com/docs/html/read-dtd.html 要は、HTMLファイルの先頭で宣言されていなければならない<!DOCTYPE～>という記述の事です。その(X)HTMLファイルがどの様なDTD（定義）に基づいて記述されるかを示すもので、必須です。どの文書型を定義するかによって、CSSの解釈等、表示結果の差に関わってきますので、この情報は非常に重要です。 お手元のHTMLファイルにも、必ずこの様な記述がされている筈です。まずは、それを確認して下さい。メモ帳で書かれているのであれば、直接ソースを見ながら編集されているという事ですから、確認するのは容易な筈です。 で、ANo.3様のアドバイスされている通り、その<!DOCTYPE～>が、XHTMLの何れかのヴァージョンだったり、HTML4.01 Strictであれば、html要素（<html>～<html>）とbody要素（<body>～</body>）に対して別々に背景が指定できる、という事です。例えば、下記はHTML4.01 Strictでのサンプルです。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <style type="text/css"> <!-- html { margin: 0; padding: 0; background: url(images/hoge2.jpg) no-repeat bottom left fixed #fff; } body { font-size: 12pt; line-height: 200%; margin: 0; padding: 0; background: url(images/hoge1.jpg) no-repeat top right fixed #fcc; } p { margin: 0; } --> </style> </head> <body> <p>（テキストなどのコンテンツ）</p> <p>（テキストなどのコンテンツ）</p> <p>（テキストなどのコンテンツ）</p> </body> </html> --------------------------------------------------------------------- 画面右上に表示する画像をhoge1.jpg、左下に表示する画像をhoge2.jpgとし、前者をbodyに、後者をhtmlの背景画像として指定しています。 ※便宜上上記サンプルではhtmlとbodyの領域の違いが分かり易い様に、一時的に前者に白、後者に薄い赤の色も併せて指定しています。本番では削除して下さい。 とりあえず上記のサンプルを試してみてはいかがでしょうか。それでイメージが違う様であれば具体的に補足して下さい。
お礼
ご回答ありがとうございます。 ご指摘感謝です。 <!DOCTYPE～>のことは気付いたのですが、No.3様が仰る意味がわからなく(´・ω・｀)・・・ どう書かれていたらどういう意味なのか理解できませんでした。 サイトを作りつつ、HTMLタグのことをもう少し勉強したいと思います。 サンプル作って頂きありがとうございました！ 試してみたのですが、画像2が表示されませんでした。 そのままコピーしたのですが・・・不思議です。 また私のやり方が間違っている可能性が高いですが＞＜汗 本当にありがとうございました。
- hamue
- ベストアンサー率33% (2/6)
回答者のhamueです。すみません、若干書き忘れていました。 div#wrap{ background: url(画像1) no-repert right top; width: 100%; } これでどうでしょうか？ widthを100%に指定していなかったので横幅が十分に確保できていなかったかもしれません。また、高さも画像分は確保できないといけないので、場合によってはheightで高さ指定をしてください。
お礼
二度もご回答ありがとうございます。 出来ました！ お世話になりました(・∀・) 本当にありがとうございました。
- hamue
- ベストアンサー率33% (2/6)
現状のcssでは一つの要素につき登録できる背景画像は１つまでです。 ですので<body></body>内に全体を囲む要素を作ってあげればよいです。レイヤーと同じ理屈です。 お求めの表示の場合はこのようにしてください。 <body> <div id="wrap"> ～文字とか～ </div> </body> ■cssの設定 body{ background: url(画像2) no-repert left bottom; } div#wrap{ background: url(画像1) no-repert right top; } ページの一番下に表示させたい画像はbody要素のスタイルで設定してください。（divの高さは中コンテンツ分しか高さを保持できません、heightを指定するのはあまりオススメできませんし）
お礼
ご回答ありがとうございます。 お書き下さったCSSの設定の方で、コピペして試させていただきました。 結果ですが、画像1、2にそれぞれ入れてみた所、画像2のみが表示されました。 画像1は画像自体表示されなかったです(´・ω・｀)すみません 両方とも固定で右上、左下に載せたいのですが、出来ないのでしょうか；； 私のやり方が間違っているのでしたら申し訳ありません。 ありがとうございました！
DTDがxhtmlだったりhtml4.01 strictの場合はhtml要素に指定するといいですよ。
お礼
ご回答ありがとうございます。 大変申し訳ないのですが、意味がよく分からなかったです；； 意味など調べてはみたのですが・・・本当にすみません(´・ω・｀) 教えて下さりありがとうございました！
- naokita
- ベストアンサー率57% (1008/1745)
<style type="text/css"> body{ font-size: 12pt; line-height: 200%; margin-left: 0px; padding-left: 0px; background-image: url(画像1); background-position: right top; background-repeat: no-repeat; background-attachment: fixed; } div#aaa{ background: url(画像2) no-repeat 0 100% ; } </style> ------------------------------- <body> <div id="aaa"> <p style="height:1000px;">ここにコンテンツ</p> </div> </body> ------------------------------- コンテンツに、ある程度の高さがあれば良い。 （ style="height:1000px;" は今コンテンツが無いから例として設定） 画像2を固定にするなら fixed を入れる。 そんなに固定画像があるのは、おススメしない。。。
お礼
ご回答ありがとうございます。 下の方のタグは上手く出来なかったです、すみません（汗 上のCSSの方ですが、コピペして画像1、画像2を入れて試してみた所、上手くいきませんでした。 画像1のみが表示されてしまって、画像2は画像自体がが表示されなかったです。 教えて頂いたのに申し訳ありません。 もし私のやり方が間違っていましたら、お暇な時にでもご指導頂けると助かります。 ありがとうございました！
補足
お礼欄を書いた後に投稿しております（書き忘れです、すみません）。 オススメしないと仰る理由は、重くなるからとかの利用しにくくなるという意味でしょうか？ 見難くなりそう、というご意見の場合でしたら、固定画像が2つなのはそれぞれが小さめのあまり華やかさがない画像だからです。 どっちか1つの画像だと地味すぎて逆に寂しいのですが、気に入った画像のため利用したいと思いまして・・・ 幸い、画像1と2は色も雰囲気も似た画像なので合わせてみようと思い立った次第です。 もし違う理由でしたらすみません＞＜
CSSでは基本的に背景画像を指定するのは１画像のみです。 （一つの要素に対して。） で在るからdiv等のブロックレベルに対して、表示位置を「絶対数値」で指定して表示させる方法が良いのでは？ 調べれば出ますので検索を。
お礼
ご回答ありがとうございます。 絶対数値、調べてみましたが良く分かりませんでした。 折角教えて下さったのに申し訳ありません。 また今から調べなおしてみます（汗 ありがとうございました！
お礼
ご回答感謝です。 そもそも最初から間違っていたんですね＞＜ すみません・・・ くっつけるものだったのですかー・・・（汗 試してみたら表示されました。 大変お世話になりました(・∀・) ありがとうございました！