背景画像を2枚使いうまく繰り返す方法

2023/08/09 02:09

このQ&Aのポイント

htmlとcssを使用してホームページを作っている際に、背景画像を2枚使用しているがうまく表示されない問題が発生している。
最初はbody要素とdiv要素にそれぞれ背景画像を指定したが、div要素がボックスとして表示されるため横に繰り返されない。また、html要素にも背景画像を指定すると両方の画像が表示されない問題が発生する。
html要素を消さずにbody要素で背景画像を無限に繰り返す方法を知りたい。

ベストアンサー

背景画像を2枚使いうまく繰り返す方法

2009/07/20 05:48

htmlとcssでホームページを作っています。背景画像を2枚使用しているんですが、どうしてもうまく表示されません。 1枚目はページ上部に。 2枚目はその下からすべて。で、それぞれ横にリピート。 2枚目だけ縦にリピートして表示させようとしてます。最初はbodyとdivで -------------------css-------------------------- body { background-image:url(""); background-repeat:repeat; } div.body { background-image:url(""); } ----------------html-------- <body> <div class="body"> 内容 </div> </body> --------------------------------------------- としています。ですが、これだとdivのボックスができてしまい、横に無限に繰り返されないことになります。画面を縮小した時に切れてしまいます。なので、htmlとbodyにそれぞれ背景をつけたんですが、今度は両方の画像が表示されませんでした。 html { background-image:url(""); background-repeat:repeat-x; } body { background-image:url(""); } htmlのほうを消すと、bodyで指定した画像が縦横無限に繰り返されます。 htmlを消さずにbodyを無限に表示されるにはどうしたらいいですか？

un-moyen
お礼率76% (20/26)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#137826

2009/07/20 12:45 回答No.1

> 2枚目はその下からすべて。 > それぞれ横にリピート。 > 2枚目だけ縦にリピートして 2枚目はどうしたいのでしょう？縦？横？両方？「最初はbodyとdivで・・・」の例を見ると両方ということでしょうか。その最初の例で div に width: 100%; としてもうまくいきませんか？

質問者

お礼 2009/07/20 16:35

解決できました。 >その最初の例で div に width: 100%; としてもうまくいきませんか？をヒントに、width: auto;　にして margin-left argin-right の値をマイナスにして画面いっぱいにすることができました。ありがとうございます。

質問者

補足 2009/07/20 15:52

説明不足でしたね。。。そうです。2枚目は両方にリピートさせたいです。 >その最初の例で div に width: 100%; としてもうまくいきませんか？うまくいきませんでした。やっぱり、両端が切れてしまって、bodyで指定した画像が入ってしまいます。

関連するQ&A

背景画像を二つ指定
こんにちは。全体の背景画像(斜めストライプの柄)と、コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。どうすればIE以外でもうまく表示されるでしょうか？背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
背景画像の指定方法
少し調べたのですが、さっぱり原因が分からない為質問させていただきます。外部CSSで背景画像を指定しているのですが、WinXP IE7で作製した所うまくいったのですが、別のマシン（WinXP IE6）で見ると表示の仕方が変わってきます。参考ソース▼ 【外部CSS】----- .bg { width:300px; background-image:url(bg.png); background-repeat:no-repeat; background-attachment:fixed; background-position: bottom;} 【HTML】----- <div class="bg">長い本文</div> IE7だと、開いているウィンドウサイズに合わせて、見ている画面範囲の下部に背景画像が来るのですが、IE6の方だと、長い本文をスクロールしていった最後に、背景画像が表示される状態です。分かりにくい説明かもしれませんが、アドバイスよろしくお願い致します。
- 締切済み
- HTML
背景画像だけをはみ出して表示させたい。
CSSについて質問です。よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、やり方がわかりません。例えば、exampleというIDをつけている要素があって、中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、何かいい方法はありませんでしょうか。具体的には横幅180pxのサイドバーに182pxの背景画像を付けて枠を作ろうとしています。ご教示の程よろしくお願い申し上げます。
- ベストアンサー
- HTML
背景リピート―反映されない
背景をリピートしたいのですが、反映されません。～HTML～ <body> <div id="container"> <div id="about"> ここに背景をリピートさせたい。 </div> </div> </body> ～CSS～ #container #about 　{ background-image: url(img/○○.jpg); background-repeat:repeat-y; } これだけでは駄目なのでしょうか？全くの無知で申し訳ありません。。
- ベストアンサー
- その他([技術者向] コンピューター)
背景画像にロゴを重ねる方法を教えてください。
ＣＳＳで背景画像にロゴを重ねる方法を教えてください。現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。ご教授いただける方何卒宜しくお願いします。
- ベストアンサー
- HTML
CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。当方はCSS初心者です。画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。何卒ご教示下さい。
- 締切済み
- HTML
2つ画像を背景にするスタイルシートってある？
1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？ <STYLE TYPE="text/css">  </STYLE>
- 締切済み
- CSS
背景を固定する。
<HTML> <HEAD> <TITLE>・・・</TITLE> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY> ・・・ </BODY> </HTML> このタグをいれても、背景が表示されず真っ白です。何か間違ってるところがありますか？
- ベストアンサー
- その他（インターネット・Webサービス）
サムネイルをクリックして背景画像を変える方法を教えてください
サムネイルをクリックすると背景画像が変化するようにしたいのですが、以下のソースではうまくいかず、質問に上がらせて頂きました。まず<head>～</head>に <style type="text/css">  </style> と入れて、<body>～</body>に <a href=JavaScript:; onclick="document.body.style.backgroundImage='画像URL'";> <img src="画像URL" title="***" width="200" height="60" border=0 class="pictw"/></a> （class="pictw"はサムネイルに枠線を付ける設定になっています）としたのですが、サムネイルは表示されるのにクリックしても何も変化しません。他のソースも試したのですが、上一列のみに表示などの背景画像の位置指定やリピート設定ができるものが見つかりませんでした… （この条件が必須なので…）どうすればいいのかどうか教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
背景イメージの重ね表示
こんにちは。 MTを使ってテンプレートを作っているのですが、サイドバー全体の背景の上に、別な背景を表示させようとしています。例えば以下のようなかんじです。 <style type="text/css"> .bg { 　background-position: left; 　background-repeat: repeat-y; 　background: url("./img/bg.gif"); } .fg { 　padding-bottom: 100px; 　background-position: bottom; 　background-repeat: no-repeat; 　background-image: url("./img/fg.gif"); } </style> 　　　　　　：　　　　　　：  <div class="bg"> 　　<div class="fg"> 　　　　　　：　　　　　　：　　</div> </div>  IE だと全体の背景が前面にでてしまい、ホントは前面に表示されて欲しい別な背景が消されてしまい困っています。※Firefox などでは問題ない。サイドバー全体の背景の上に別な背景を表示させたい場合には、どのようにすればいいのか教えください。よろしくお願いします。
- ベストアンサー
- ブログ