CSSで背景画像だけをはみ出して表示させたい方法
- CSSで背景画像だけをはみ出して表示させたい方法を教えてください
- 要素の背景画像だけをはみ出して表示させたい場合、CSSのoverflowプロパティを使用することができます。
- 具体的には、背景画像のある要素に対してoverflowプロパティを設定し、背景画像のみがはみ出すようにします。
- ベストアンサー
背景画像だけをはみ出して表示させたい。
CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。
- midorinodonchan
- お礼率97% (101/104)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 画像の表示方法について
画像の表示方法について 画像に関してですが、HTMLの中にimgでマークアップするより、cssで画像を指定した ほうがいいとある書籍に書いてありました。しかし、実際の方法が具体的に記載されて いませんでした。 それで考えたのですが、以下のように<div></div>で範囲を決めて、その背景画像に 画像を指定すればよいと思いました。 その際に、<div>と</div>の間には何も入らなくてもいいのでしょうか？ つまりこういうことです。 <div id="photo"></div> css #photo { background-image: url(image/photo01.gif); background-repeat: no-repeat; width: 240px; height: 180px; } これで240×180の写真が出せると思いますが、中に何も入らないのは文法上 いいのかどうか分かりません。 知人に聞いたら、適当にテキストを入れて、それをcssのtext-indentで表示を 消したらいいと言われました。つまり下記の通りです。 <div id="photo">photo1</div> css #photo { background-image: url(image/photo01.gif); background-repeat: no-repeat; text-indent: -9999px; ←これでテキストをかなたに飛ばす width: 240px; height: 180px; } HTML、cssについては、独学で本などで学んでいるため、聞きたいことが聞けずに 困る時があります。上記のものもその一つです。 この質問と共に、ついでで申し訳ありませんが、伺いたいのですが、Webマスター たちが集まって、お互いに質問したり答えあったりするサイトや掲示板などが あったらお勧めのものを教えてください。何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
- div入れ子の背景画像
【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> <div id="menu">メニュー</div> <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか？ 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
- ホームページの背景画像が表示されない。
ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。 構成としては、ものすごく単純な構成なのですが・・。 構成は図に記載させていただきました。 大枠を【Contents】というDiv要素で囲み、 その中に【mainArea】【subArea】をDiv要素配置しております。 【mainArea】はFloat：Left【subArea】はFloat:Rightを設定し左右に配置しております。 【subArea】の中にさらに【6Support】というDiv要素を作り、その中に背景画像を設置したところブラウザにて表示されません。 色々試してみたのですが、どうしても表示されずにお手上げ状態です。詳しい方にアドバイス・ご教授いただければ幸いです。 ※ちなみに、上記構成にて【subArea】に背景を設定すると問題なく表示されます。 【HTML】 <div id="contents"> <div id="mainArea"> id "mainArea" の内容がここに入ります</div> <div id="sideArea"> <div class="6support"> 背景画像をおきたい。</div> </div> </div> 【CSS】 #contents { height: 1000px; width: 960px; margin-right: auto; margin-left: auto; } #mainArea { float: left; height: 800px; width: 700px; } #sideArea { float: right; height: 800px; width: 250px; } #sideArea .6support { height: 400px; width: 240px; background-repeat: no-repeat; margin-left: 7px; background-image: url(images/6supportBack.jpg); } 一応、原状を「 http://soltsuger.web.fc2.com/test.html 」にアップさせていただいております。参考になればご覧ください。 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- 背景画像
背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>
- ベストアンサー
- CSS
- 背景イメージの重ね表示
こんにちは。 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 などでは問題ない。 サイドバー全体の背景の上に別な背景を表示させたい場合には、どのようにすればいいのか教えください。 よろしくお願いします。
- ベストアンサー
- ブログ
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
- HP作成で背景画像が表示されないです・・
いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 － html － <body> <div id="container"> <div id="header"> →背景画像表示されます。 <p>＊＊＊＊＊</p> </div> <div id="box"> <div id="left"> →背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> － ｃｓｓ － #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 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に足らないものを追加したりと体当たりで カスタマイズに挑んだのですが、どうしてもうまくいきません。 自作テンプレートのHTMLは<div>で入れ子状態になっており、簡単に分解？すると <div id="container"> <div id="blog"> </div> <div id="right"> </div> </div> となっており、 サイドバーのcssは div#right { width : 220px; float : right; text-align:left; margin: 0px; padding:30px 0px 0px 0px; overflow: hidden; font-size: 0.7em; background-color: #f6f6f6;} です。 （情報が不十分でしたら教えてください・・・！） 参考URLとして自分のブログのテンプレート表示のURLを記載します。 http://hare77777.blog58.fc2.com/?template=test2&index お分かりの方いらっしゃいましたらよろしくお願いいたします。
- ベストアンサー
- HTML
- 全く同じソースなのに、一方で背景画像が表示されない。
現在、開発用サーバーと公開用サーバーに分けてサイトを作成しているのですが、 開発用サーバーでは表示されている画像が、公開用サーバーだと表示されません。 該当箇所は以下のコードです。 開発用のファイルを公開用にコピーしているので、同一のコードを使用しています。 <div id="aaa"> <div id="bbb"> <div id="ccc"></div> <div id="ddd">ここにメッセージ</div> </div> </div> CSSで背景を指定しています。 #ccc { background-image:url(../img/img.gif); background-repeat:no-repeat; width:600px; height:32px; } cccのbackground-imageが公開用だと表示されません。 ×となっているわけでは無く、何も表示されていません。 画像ファイルのパスも開発用と同一です。 試しに背景画像では無く背景色を指定したところ、表示されました。 画像ファイルに問題があるのか、公開用サーバーの設定等に問題あるのか、わかりかねています。 アドバイスよろしくお願いします。
- ベストアンサー
- HTML
お礼
勉強になりました。ありがとうございます。