CSSで背景のリピート設定について

2023/08/09 16:42

このQ&Aのポイント

CSSを使用して背景のリピート設定について教えてください。
初心者がホームページ制作をしている中で、背景のリピート設定について詳しく知りたいです。
背景のリピート設定に関して、うまくできない問題に直面しています。解決方法を教えてください。

ベストアンサー

css　で背景のリピート設定についておしえてください。

2010/05/15 09:11

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はきちんと内容の量にあわせてレピート表示できていますが、背景リピートはできていません。どのようにしたらいいでしょうか？？？どなたかおねがいします。

nakkro
お礼率26% (22/82)

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

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

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

ベストアンサー

BellBell
ベストアンサー率54% (327/598)

2010/05/15 12:02 回答No.1

現象から想像するに、content1あたりをCSSでfloatさせてる可能性が大かという気がします。もしくは、<div id="globalnavi">の下に不要な</div>があるのが悪影響を与えてるのか。 CSS側を載せてくれたら、原因が探れるかも知れませんが、今の情報のみではちょっと判りませんね。 ※CSSでレイアウトする際は、背景色を赤や青で原色で指定して(背景画像はコメントアウトしておいて)調整を終えた後に、最後に元に戻すようにすれば簡単ですよ。

関連するQ&A

cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。重ねて表示するのはどうすればいいのでしょうか？質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。やりたいことは例えば↓のページのように、背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。初歩的な質問ですみませが、「ここがおかしい」という点と、もし可能であれば「ふつうはこうする」というのがあれば教えてください。以下作りかけですがcssとhtmlです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container">  <img src="img/img_main.jpg" alt="タイトル" />  <div id="map">  </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer">  </div> </body> </html>
- 締切済み
- CSS
背景画像へのリンク
CSSで背景画像をリンクさせているのですが文字が出てきて困っています。ソースは以下の通りです。文字が出ないようにするにはどうしたらいいのでしょうか。 <div id="side"> <div class="menu_content"> <ul class="menu"> <li class="menu_top"><a href="index.html">トップページ</a></li></ul> </div> </div> .menu_content li{display:block; text-indent:-9999px; font-size:0px; width:206px;height:68px; text-indent:-9999px;} li.menu_top a{display:block; width:406px;height:128px; text-indent: -9999px; background:url("css/menu_top.gif") bottom left no-repeat;}
- 締切済み
- HTML
HTMLとCSSを使い、
HTMLとCSSを使い、メニューボタンを作成しました。しかしIE８やgooglchromeではきちんと表示されるのに対して Firefoxではメニューボタンの背景に設定した画像が表示されません。以下にコーディングを記します。 ************************************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="outline"> <ul id="ul"> <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> </ul> </div> </body> </html> ************************************************************** メニュー背景ボタンはPhotoshop、色はRGBで作成しました。ちなみに、 <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> を <a href="#" class="menu"><li>ホーム</li></a> <a href="#" class="menu"><li>トップ</li></a> に変更すると画像は表示されるようになりますが、本来ホームとトップの裏に１つづつ表示されるはずの画像がテキストの無い所でもう１つづつ表示されてしまいます。計４つです。かといって <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> を <li class="menu"><a href="#">ホーム</a></li> ><li class="menu"><a href="#">トップ</a></li> に変更しても、 a:hoverで色違いの同じ画像を背景にせっとするときにサイズなどがうまくいきません。ボタンを全て画像にして、ビヘイビアでイメージをスワップさせるという手もありますが、それは避けたいと思います。 Firefoxでもきちんと表示される正しいコーディングを教えてください。
- ベストアンサー
- HTML
CSS、IE6-7で要素が消えてしまいます。
CSS初心者です。過去の質問や書籍、webでの検索をしつつも解決しませんでしたので、どうかお力添え下さい！お願い致します。当方ではwebレイアウトの確認をMac OSX Firefox、Opera、Safari でおこなっています。 Windows IE については、オンラインのレンダラーでの確認です。シンプルな構造のページのはずなのですが、以下の HTML / CSS でリストを横並びにしたナビゲーションバーが IE6、IE7で表示されません。 " absolute position dissappearing bug" ではないのでしょうか？ちなみに、画像置換で背景画像をマウスオーバーで変更するタイプのものです。 ---------------------------------------HTML（body以下） <div id="wrap" > <div class="navwrap"> <div id="nav"> <ul> <li><a href="menu1.html" class="nav-1">メニュー１</a></li> <li><a href="menu2.html" class="nav-2" >メニュー２</a></li> <li><a href="menu3.html" class="nav-3">メニュー３</a></li> </ul> </div> </div> </div> </body></html> ---------------------------------------CSS（上記部分） #wrap { height:100%; width: 100%; background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { 　　width: 100%; 　　text-align: center; 　　position: absolute; 　　bottom: 30px; 　　} #nav { 　　position: static; 　　width:700px; 　　height: 50px; 　　text-align:left; 　　margin:0px auto; 　　} html > body #nav, html > body #nav ul li a { /* for Safari */height: 50px;} #nav ul { margin: 0; padding: 0; list-style: none; 　　} #nav ul li { float:left; width: 140px; 　　} #nav ul li a { display: block; color: #333; font-size: 75%; text-align: center; letter-spacing: 0.1em; text-decoration: none; text-indent: -9999px; 　　} #nav ul li a:hover { color: #000; background-position: bottom; 　　} .nav-1 {background: url(parts/nav-concept.png) top left no-repeat;} .nav-2 {background: url(parts/nav-about.png) top left no-repeat;} .nav-3 {background: url(parts/nav-collection.png) top left no-repeat;} 長くてすみませんが、詳しい方、どうかお願い致します！
- 締切済み
- CSS
FireFoxでvisitedの表示不具合について
HTMLやCSSに知識がなく困っています。質問をよろしくお願いいたします。メニューバーには８つのボタンがあるのですが FireFoxでは、visitedが表示されず IEはページの行き来でメニューボタンが消失します。何か解決法はありませんでしょうか？よろしくお願いいたします。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> 　<li><a href="../new/top.html" target="main" class="c"></a></li>　 <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
cssのulタグについて質問です。
cssの初心者ですがよろしくお願いします。以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。その下に幅いっぱいの画像を入れたかったので一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが２段目の１番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。（横に短くなっている）画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 cssで指定している画像の大きさも間違いありません。試しに上のメニューを<div id="header">にして <div class="clear"></div>で区切って下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。 htmlはこれです <div id="header"> <ul class="yama"> <li class="logo"><a href>ロゴ</a></li> <li class="kyouiku"><a href="">教育</a></li> <li class="syoukai"><a href="">紹介</a></li> <li class="shizen"><a href="">自然</a></li> <li class="mura"><a href="">村</a></li> </ul> <div class="clear"></div> <div class="line"></div> <ul class="rei"> <li class="name"><a href="">あいうえお</a></li> <li class="abc"></li> <li class="map"><a href="">マップ</a></li> </ul> </div> <li class="name"><a href="">あいうえお</a></li>これが問題のタグです。文字が足りなかったのでcssの一部ですが /* rei */ #header ul.rei{ float:left; } #header ul.rei li{ float:left; display: inline; } で　<li class="name">　のcssですが #header ul.rei li.name { display: block; width:295px; height:51px; } #header ul.rei li.name a { display: block; background: url(../img/name.jpg) no-repeat top left; text-indent:-9999px; height:100%; width:100%; } #header ul.rei li.name a:hover { display: block; text-indent:-9999px; height:100%; width:100%; background: url(../img/name_om.jpg) no-repeat top left; } という風にしています。初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。
- ベストアンサー
- CSS
訪問済リンクを未訪問の状態に再び戻す方法
質問お願いします。フレームで上部に組んだメニューボタンの訪問済リンクが、ページを移動するごとに訪問済みが増えて、どのページを現在、訪問しているのかわからなくなります。訪問済リンクを未訪問の状態に再び戻す方法を教えてください。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> 　<li><a href="../new/top.html" target="main" class="c"></a></li>　 <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
メニューボタンの背景が表示しない
ｃｓｓでメニューボタンの背景をhoverで変更しようと思っています。が、最初からHP上にメニューボタンが表示されません。たびたびHPを作っていますが、今回表示されない原因がわからず、非常に困っています。《html》 <body id="top">  <div id="wrap"> <div id="header"> <img src="./images/title.png"> </div>  <div id="navi"> <ul id="menu"> <li><a href="top.html" >TOP</a></li> <li><a href="menu.html" >メニュー＆料金</a></li> <li><a href="access.html" >アクセス</a></li> <li><a href="question.html" >お問い合わせ</a></li> </ul> </div>  <div id="contents"> 以下　省略《css》 #navi{ width: 750px; height:45px; margin: 0px; } #menu { margin: 0; padding :0; list-style-type : none; } #menu li { margin:0; float:left; } #menu li a{ display:block; width: 150px height: 43px; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; } どこが間違っているのか指摘していただけないでしょうか。
- ベストアンサー
- HTML
CSS使用時のDIVにおける背景指定について
現在ホームページの作成でＣＳＳをメインに練習を行なっております。テーブル配置を最小限にと思い、ＣＳＳにて制作を試みておりますが、ヘッダー部分だけがどうしても上手くいかずつまずいてます。色々なＣＳＳに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな？とも考え始めております。でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にＣＳＳに対する理解が低いのかとも思いますが、どうかご教授をお願いいたします。先ず構想図から… －－－－－－－－－－－－－－－－－－－－－－｜　　　　　　DIV id="h-top"　　　　　　　｜－－－－－－－－－－－－－－－－－－－－－－｜　　　　　　DIV id="h-cate"　　　　　　　｜－－－－－－－－－－－－－－－－－－－－－－｜　　　　　｜　　　　　　　　　　　　　　｜｜　　　　　｜　　　　　　　　　　　　　　｜｜DIV 　　　｜　　DIV　　　　　　　　　　｜｜id="index"｜　　　 id="main"　　　　　　｜｜　　　　　｜　　　　　　　　　　　　　　｜｜　　　　　｜　　　　　　　　　　　　　　｜｜　　　　　｜　　　　　　　　　　　　　　｜－－－－－－－－－－－－－－－－－－－－－－｜　　　　　　DIV id="footer"　　　　　　　｜－－－－－－－－－－－－－－－－－－－－－－上記のようなありがちなレイアウトのＨＰを考えています。 DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。質問は、上記のDIV内容の記述についてなのですが、 ●DIV id="h-top"は、横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、縦100PXのメイン画像画像を入れたいと思っております。 ●DIV id="h-cate"には、横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には横740PXに合わせたナビボタン（w123*h40）を６つ配置したいと考えています。共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく困っております。現状でのHTML文では以下の通りとなっております。 <body> <DIV id="header"> <DIV id="h-top"> <img src="hoge" width"740" height"100" alt""> </DIV> <DIV id="h-cate"> <ul class="h-navi"> <li class="h-navi01"> <A href="index.html"> <span class="span1">トップページ </span></A> </li> <li class="h-navi02"> <A href="web/index.html"> <span class="span1">取扱商品一覧 </span></A> </li> 　　　　　・　　　　　・　　　　　・ </ul> </DIV> </DIV> </body> ＣＳＳも書こうと思いましたが、色々とやりくりして今では表示も配置もおかしくなってしまいましたので、控えさせて頂きました。また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。
- ベストアンサー
- CSS