- ベストアンサー
背景リピート―反映されない
背景をリピートしたいのですが、反映されません。 ～HTML～ <body> <div id="container"> <div id="about"> ここに背景をリピートさせたい。 </div> </div> </body> ～CSS～ #container #about { background-image: url(img/○○.jpg); background-repeat:repeat-y; } これだけでは駄目なのでしょうか？ 全くの無知で申し訳ありません。。
- 7yoite
- お礼率46% (6/13)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
で、全体の長さの指定は？
関連するQ&A
- 上下にイメージをリピートさせたい
よく見ますが、下記サイトの様にtopとbottom（ヘッダーとフッター）にbackground-imageを無限にループするイメージ（カラー） ってcssでどう指定したら出来るのでしょうか。 左右にスペースが出来てしまったりで上手くいきません。 http://www.deviantart.com/ http://www.good.is/ http://www.postbox-inc.com/ ----------------html--------------------- <body> <div id="container"> ・ ・ ・ </div> <div id="footer> </div> </body> ------------------css---------------------- body { background-image: url(img/bg1.gif); background-repeat: repeat-x; } div#footer { background-image: url(img/bg2.gif); background-repeat: repeat-x; } ではだめですよね・・・ なるべくシンプルなソースがいいのですが、 お助けください。
- 締切済み
- CSS
- css で背景のリピート設定についておしえてください。
css で背景のリピート設定についておしえてください。 htmlもcssも初心者で初めてホームページの制作をしています。 タグをコピーします。 <body> <div id="header"> </div> <div id="globalnavi"> <ul> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> </ul> </div> </div> <div id="haikei_repeat"> <div id="content1"> <div class="inner_top"></div> <div class="inner_repeat"> ここにテキスト </div> <div class="inner_bottom"></div> </div> <div id="body_right"> <div class="inner_top2"></div> <div class="inner_repeat2">ここにもテキスト</div> <div class="inner_bottom2"></div> </div> </div> </body> bodyにも背景画像を使い、ヘッダ以下の コンテント部分の<div id=haikei_repeat> にy方向にリピート画像を指定しました。 <div id="haikei_repeat"> の中にある、 div classにもそれぞれ背景画像をしていし、topとbottomはリピートさせず、 真ん中のinner_repeatのみ背景画像をリピートしています。 このdivにテキストやimgを挿入し、後ろのhaikei_repeatもinnerrepeatの大きさに合わせて縦に リピートしてほしいのですが、うまくできません。 <div id="haikei_repeat">と <div id="inner_repeat">のボックスサイズは 横は指定し、縦のみauto にしています。 inner_repeatはきちんと内容の量にあわせてレピート表示できていますが、 背景リピートはできていません。 どのようにしたらいいでしょうか？？？ どなたかおねがいします。
- ベストアンサー
- HTML
- oveflow、margin等の表示について質問です
以下のようなhtml （XHTML 1.0 Transitional、文字コードはUTF-8） <body> <div id="wrapper"> <div id="container"> test </div> </div> </body> で、bodyにリピート有りの背景、wrapperにx軸にリピートの背景、containerにリピート無しの背景と背景色に白をcssで設定しました。 containerは中央揃えで上に35pxの空きをもたせたいのですが、containerに「margin-top:35px」とするとIE（6、7）では意図した通りに表示されるのですがfirefoxだとwrapperにも35pxの空きができてしまいbodyの方の背景が見えてしまうといった状態になりました。 containerのmargin-topを指定せず、wrapperに「padding-top:35px」を指定する、または、containerのmarginはそのままでwrapperに「overflow: hidden」を指定すると両方のブラウザで意図した通りに表示されました。 ただ、paddingを指定した方はわかるのですが、なぜoveflowで、しかもhiddenで解決できたのかが全くわかりません。個人的な感覚ではcontainerのmarginをいかす方法で進めたいのですが…。 変な質問ですが、なぜこれで解決できたのが教えていただけると助かります。根本的に間違っている点などもありましたらご指摘していただければ幸いです。説明下手ですが何卒、よろしくお願いいたします。 ---元のcss--- html,body { height: 100%; margin: 0px; padding: 0px; } body { background-image: url(../img/***1.jpg); background-repeat: repeat; background-position: left top; height: 100%; } #wrapper { background-image: url(../img/***2.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 100%; } #container { background-color: #FFFFFF; background-image: url(../img/***3.jpg); background-repeat: no-repeat; background-position: left top; width: 850px; margin-right: auto; margin-left: auto; height: auto; min-height: 620px; margin-top: 35px; }
- ベストアンサー
- CSS
- スタイルシートが反映されません。
本の通り、スタイルシートを記述しましたがIE5.5では背景が反映されず NN4.75ではHTMLの内容までも消えて、何も表示されません。 htmlファイルのすぐ上のimagesフォルダにbggreen.jpgを入れてあり、 ディレクトリは間違いないと思うのですが、何がおかしいのかわかりません。 よろしくお願い致します。 <TYPE="text/css"> <!-- body { background-image: url('images/bggreen.jpg'); background-repeat: repeat-y } --></STYLE>
- ベストアンサー
- HTML
- CSSで背景画像が表示されない
CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか？ http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします！
- ベストアンサー
- HTML
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- CSS
- CSSで背景画像の幅を指定したい
お世話になります。 現在CSSを猛勉強中なのですが、検索してもひっかからず、悩んでいるので質問させてください。 cssでは #maincontents{ width:760px;} #background-image: url(../img/haikei.jpg); HTMLでは <div id="maincontents"> </div> としているのですが、反映されず、背景はウィンドウを横に伸ばせばのばしただけ広がってしまいます。 Yahooなどのように縦長のHPを作りたいのですが困っています。 お分かりになるかたがいましたらお答えいただけたら幸いです。
- ベストアンサー
- ホームページ作成ソフト
- Firefoxのみ下に空白が出来るバグ
背景を２枚使用し、それぞれ上と下に固定して、本文がのびると真ん中（画像のない場所）がのびるようにしたいのですが、 Firefoxのみ、下の画像に空白ができて埋まりません。 画像は、bodyに下の画像を、containerに上の画像を入れています。 いい方法はないでしょうか？ ----html------------------ <html> <body> <div id="container"> </div> </body> </html> ---css------------------ body{ background-image:url(../images/back_01.jpg); background-repeat:repeat-x; background-position:bottom; margin:0 auto; height:100%; } div#container { background-image:url(../images/back_02.jpg); background-repeat:repeat-x; width:100%; height:100%; margin:0 auto; text-align:center; } ちなみにhtmlにcssでheight：100％などを入力すると、画像が消えて表示されなくなります。 よろしくお願いします。
- ベストアンサー
- CSS
- footerの背景が切れて、背景画像が見えてしまう
かなりハマってしまいまして、ご相談させて下さい。 添付画像の上の図になる形で下記コードにてhtml/cssを記載しました。 青のimg.bgはウィンドウ幅によって比率を保ったまま横100%で可変します。 containerの縦幅は決まっていて、img.bgがウィンドウ幅が横に広がっても、 container、contents、footerはz-indexで上に乗せ、あくまでもcontainerの 高さ600pxのみが表示できるようにしています。 通常のウィンドウサイズや縦にウィンドウを伸ばした場合は問題ないのですが ウィンドウを横一杯に伸ばした時に（添付画像の下の図）footerの下から img.bgが見えてしまいます。 wrapperで縦横100%の値にしていて、footerの背景画像もimg.bgを 隠せる十分な長さのものを用意しているのですが、最後のcopyrightを 入れた所から切れてしまいます。 横一杯に伸ばした際に、img.bgの長さに合わせてfooterで隠すには どのようにしたら良いでしょうか？ ご指導の程、どうぞ宜しくお願い致します。 下記、不要部分は省いたcss/html記載いたします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ CSS ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ html,body{ width:100%; height:100%; position:relative; } #wrapper{ width:100%; min-height:100%; height:100%; background-color:red: position:relative; } body > #wrapper{ height:auto; } img.bg { /* Set rules to fill background */ min-width:1000px; min-height:586px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: absolute; top:0; left:0; z-index: 0; } #container { width:95%; height:500px; position: relative; overflow: hidden; z-index: 4; } #contents{ width:100%; background-color: green; position: relative; z-index: 2; } #footer{ width:100%; background: url(../img/footer_black.jpg) left top repeat-x; background-color: black; position: relative; z-index: 3; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ HTML ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head>...略...</head> <body> <div id="wrapper"> <img class="bg" src="img/blue_BG_pic.jpg" alt="" /> <div id="container">...略...</div> <div id="contents">...略...</div> <div id="footer">...略...</div> </div><!--/wrapper--> </body> </html>
- 締切済み
- CSS
- IE6で、背景画像とコンテナを常に中央表示させたい
bodyの背景画像と、コンテナを ブラウザウインドウ幅に対して、 常に中央表示させたいです。 IE7、8、FireFox、Safari では上手くいっているのですが、 IE6だけ、うまく行きません。（何故かずれてしまいます） コードは以下です ------------------------------------------------------- ●HTML <body> <div id="container"></div> </body> ●CSS body{ background: url(画像のパス) no-repeat; background-position: center top; text-align: center; } container{ width: 900px; margin: 0 auto; } ----------------------------------------------------------------------------------- どうやらIE6では、 コンテナも bodyに置いた背景画像も だいたい中央表示されているのですが 軸がズレている？？ようなかんじで お互いがずれて、だいたい真ん中、という感じになってしまいます。 どなたか詳しい方いらっしゃいましたら よろしくお願いいたします。。
- ベストアンサー
- HTML
お礼
回答ありがとうございました！ 長さ指定していませんでした…。。 ふーーー、すっきりです！ また、何か機会があればよろしくお願いします。