- ベストアンサー
背景に複数の画像を入れることは可能でしょうか
HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか? もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }
- tanzaak
- お礼率30% (344/1117)
- HTML
- 回答数4
- ありがとう数6
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
間違えました。 <body>を透明にしないと、<html>の背景画像は隠れてしまいます。 未検証です。 html { background-color: yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; } body { /* background-color :transparent; *//* 無指定かtransparentを指定 */ background-image:url(image/back2.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right bottom; }
その他の回答 (3)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
<html>タグにも背景を指定できます。 html { background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; } body { background-color :yellow; background-image:url(image/back2.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right bottom; }
お礼
ご回答ありがとうございました。
ページの構成上必ず存在する要素があれば、その要素の背景画像として、2枚目、3枚目の背景画像を指定することができます。具体的にどうするのかはページの構成依存するので、ここで示すことはできませんが、参考URLでは一例が解説されています。(1)から(5)まで段階的に説明されているので、参考になると思います。 「背景画像のためだけに」div要素等を入れるのであれば、img要素を入れるほうが意味的にははっきりするように思います。こんな方法もある、ということで。 --- <html> <head> <title>test</title> <style type="text/css"> #background0 { position: absolute; bottom: 0; right: 0; } </style> </head> <body> <img id="background0" src="image.png" alt="background image"/> </body> </html>
お礼
御回答ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
全体をdivで囲む。 <body> <div> ・・・・・・・・・・ </div> <body> CSS body{background:yellow url(image/back1.gif) fixed no-repeat right top;} body>div{height:100%;background:yellow url(image/back2.gif) fixed no-repeat right bottom;}
お礼
ご回答ありがとうございました。
関連するQ&A
- 時間帯によって背景画像を変える
タイトル通りなのですが、なかなかうまくいきません・・・。 <BODY style="background-image:url(test.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;"> スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。 自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); }}} } //---> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT> <BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・?どのようにすればうまくいくでしょうか?JavaScriptに関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。
- ベストアンサー
- JavaScript
- Webの背景について
今HTML、CSSなど使ってHPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか? 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですがどうしてもチェックの上に加工した画像を右下に固定したいので教えてください。 メモ帳より作成しています。 今月中に仕上げたいのでよろしくお願いします
- ベストアンサー
- その他(プログラミング・開発)
- HTMLでの背景画像設定について
はじめまして。 HP作成初心者なのですが、いろいろとネットで調べながら作成しています。 フレームを使っていて、メニュー画面側のほうに画像をふたつ使いたいと考えています。 それぞれ左上と左下とで固定する画像なのですが、それがどうしてもふたつ同時に表示できません。 <style type="text/css"> <!-- BODY {background-image : url("bg2.jpg");background-position: 100 0%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> <style type="text/css"> <!--BODY {background-image : url("bg.jpg");background-position: 0 100%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> という感じに記述しているのですが、こうすると、下にあるbg.jpgのみが反映されてしまって、bg2.jpgは反映されません。 また、bg2.jpgの上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- Webタグの背景について
今HPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか? 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですが・・・
- 締切済み
- その他([技術者向] コンピューター)
- 2つ画像を背景にするスタイルシートってある?
1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか?下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか? <STYLE TYPE="text/css"> <!-- BODY { background-image:素材のURL; background-position:0% 100%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE>
- 締切済み
- CSS
- 背景を固定した時の表の背景
こんにちは。HPを制作し始めたばかりの初心者です。 質問です。 背景をこんな感じて固定した時 <STYLE type="text/css"> <!-- BODY{ background-image : url(○○.jpg); background-repeat : no-repeat; background-attachment : fixed; background-position : 90% 50%; } --> 作ってる表の背景画像が無効になっちゃいます。 なんか間違ってるんでしょうか??? お答えを頂けると有り難いのですが。
- ベストアンサー
- HTML
- 写真素材の背景
写真素材の背景で、例えば右下に表示するためのタグがありますよね? それって↓ <STYLE type="text/css"> <!-- BODY { background-image : url("素材URL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; background-color:背景色; } --> </STYLE> でいいんですか??↑で何度かやってみたんですが、ちゃんと右下に表示されません。
- 締切済み
- その他(インターネット・Webサービス)
- 壁紙+画像(右・左・上・下)
これなんですが… どなたか教えていただけませんか? ↓は壁紙の色に(右に縦に画像)が並んで表示されます。 </STYLE> </style> <STYLE type="text/css"> <!-- BODY { background-color: #D6D6AD; background-image: url("○○○jpg"); background-repeat:repeat-y; background-attachment: fixed; background-position: right; } --> </STYLE> あと… ↓のをどのように入れれば上の1枚の壁紙に 一度に4ヵ所画像を並べられますか? (左に縦に画像を並べる) background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-y; background-attachment: fixed; background-position: left; (上に画像を横に並べる) background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-x; background-attachment: fixed; background-position: top; (下に画像を横に並べる) background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-x; background-attachment: fixed; background-position: botom; 宜しくお願いします。m( _"_ )mペコ♪
- ベストアンサー
- HTML
- グラデーション背景と画像固定背景
こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> (省略) </HEAD>
- ベストアンサー
- ホームページ作成ソフト
- 壁紙を二つ固定したい。(HTML)
ホームページを作っていてHTMLで壁紙を左横と真ん中に固定して、二つ表示されるようにしたくて、下記の設定をしたのですが、どちらか一つしか表示されません。説明がわかりにくくてすみません。 どうしたらいいでしょうか?? お手数をおかけしますが、よろしくお願いします。 <head> <style type="text/css"> <!-- body{ background-image: url(画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: 55% 50%; body{ background-image: url(画像URL); background-attachment: fixed; background-repeat: repeat-y; background-position: left; } --> </style> </head>
- ベストアンサー
- その他(インターネット・Webサービス)
お礼
再度のご回答ありがとうございました。 確かに、もう一つの画像を背景に入れることが出来ました。