- 締切済み
cssで背景画像が貼れない
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- SAYKA
- ベストアンサー率34% (944/2776)
>background-image: url(××.gif) ↓ background-image: url("××.gif")
- cherrymoon
- ベストアンサー率23% (739/3104)
body {background-image:url();} こういう状態になっていますか？ （）の後に「；」がついていないと表示されないこともあります。 どのようにタグを組まれているのか分からないので、こんなことしかアドバイスできずにすみません。
- tenderfeel
- ベストアンサー率56% (215/379)
それでダメなら ・ファイルパスが違う（CSSが書いてあるファイルから見た画像ファイルの位置） ・背景を指定してある要素の高さが0pxになっている 以上どちらかが当てはまると思われます。 floatを使っている要素の親要素は高さが0pxになりやすいですので borderとかつけて高さがあるか確認した方が良いです。 質問からはそれくらいしか推測できませんので、以上２点を確認してみてください。
関連するQ&A
- CSSでの画像指定について。
CSSでの画像指定について。 ファイルパスの指定について教えてください。 フォルダ１の中に「sample.html」、「sample.css」、「img」フォルダが入っており、 「img」フォルダの中に、「nature_01.gif」が入っています（下図）。 -------------------------------------------------------------------------- フォルダ１ L sample.html L sample.css L img（フォルダ） img(フォルダ) L nature_01.gif ---------------------------------------------------------------------------- このファイル構成だと、sample.css の中で 『background-image:url(/img/nature_01.gif)』のようにパスを指定すれば良い と理解していたのですが、背景に画像が表示されませんでした。 その後、下記のように修正すると、画像が表示されるようになりました。 firefox3.5 →修正後は画像が表示される。 Internet explore 8 →修正前、修正後ともに表示されない。 ----------------------------------------------------------------------- 【修正前】 #contents{ width:750px; background-image:url(/img/nature_01.gif); 【修正後】 #contents{ width:750px; background-image:url(../img/nature_01.gif); ------------------------------------------------------------------------ OS・・・windows xp なぜ、こうなるのか、わかるかたがいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- 画像をCSSのurlを使って表示する方法
./gazou/background/bg005.gifこちらに画像ファイルがあるのですが、この画像をCSSのurlを使って表示するときどのように指定すればよいのでしょうか？ ./basecss.cssに background-image :url("./gazou/background/bg005.gif");と記載してもうまくいきません。 カレントデイレクトリはすべて同じデイレクトリです。 CSSもカレントデイレクトリは./ではないのでしょうか？ほかのフォルダにある画像ファイルは問題なく表示されます。 {background-image:url("../test/gazou/background/bg006.gif"); 上記はうまくいく。
- ベストアンサー
- CSS
- IE8で追加したcss背景画像が表示されません
新しく追加した背景画像がFireFoxでは表示されるのにIE8だと表示されません。 ↓はソースで、「FILE3.gif'」が表示されません。 ------------------------------------------ <css内より抜粋> -css1.css- h2 { width: OOOpx; height: OOpx; background-repeat: no-repeat; background-position: O% OO%; } ※数値の部分は伏せています。 -css2.css- h2.hoge1{ background-image: url('画像場所/FILE1.gif'); } h2.hoge2{ background-image: url('画像場所/FILE2.gif'); } h2.hoge3{ background-image: url('画像場所/FILE3.gif'); } ←新しく追加したもの <jsp内より抜粋> <%@ page contentType="text/html; charset=Shift_JIS"%> <% request.setCharacterEncoding("Shift_JIS");%> ～中略～ <h2 class="hoge3"><font class="none">ホゲ３画像</font></h2> ～以下省略～ ------------------------------------------ 以前からあった背景画像はちゃんと表示されています。 jspで<img src="画像場所/ファイル3.gif">とやれば一応IEでも画像は表示できるのですが、画像の位置がズレてしまうので、この方法はだめそうです。 文字コードはcss、jspともにShift-JISです。 追加した画像はファイル1,2と同じ場所にあります。 また、<h2 class="hoge3">を<h2 class="hoge2">に変更したら、FILE2.gifの画像がIEでも表示されました。（FILE3.gifとFILE2.gifはほぼ同じ大きさです。） どなたか解決策がわかる方、またはどこを調べればいいかわかる方いましたらお願いします。
- 締切済み
- CSS
- jQueryでCSSの背景画像を切り替えたい
見出しをクリック後にCSSで指定している背景画像を変えるため、jQueryでCSSを変更させてみたところ上手くいきません。 jQueryで指定する変更後の背景画像を絶対パスに換えたら上手くいったので、 パスの指定方法が悪いところまでは分かったのですが、相対パスでの指定方法がわからなくなりました。 WordPress環境で下記のコードを使用しています。 ご教授の程、よろしくお願い致します。 【 jQuery】 ○ディレクトリ ： テーマフォルダ/js/change.js jQuery(function() { jQuery("h3 div.class").hide(); jQuery("h3").click(function() { jQuery(this).next().slideToggle("fast"); jQuery(this).css("background-image" , "url('img/pic2.jpg')"); }); }); 【CSS】 ○ディレクトリ : テーマフォルダ/style.css h3 { background: #7c8187; background-image: url(img/pic.jpg); cursor: pointer; } 【画像】 ○ディレクトリ : テーマフォルダ/img/pic.jpg テーマフォルダ/img/pic2.jpg
- ベストアンサー
- CSS
- 背景に複数の画像を入れることは可能でしょうか
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; }
- ベストアンサー
- 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
- スタイルシートで背景画像を指定
今までbodyタグで背景を指定していたのですが、スクロールバーや余白の設定で スタイルシートを使うことになったので、背景画像もスタイルシートで指定することにしましたが、何度やっても表示されません。 このように書いてみました。 <style type="text/css"> <!-- BODY { background-image:url(img/28.gif); } BODY { 余白の設定} BODY {スクロールバーの設定 } --> </STYLE> htmlと同じフォルダの中にある、imgフォルダの28.gifという画像です。 画像のパスは間違っていません。アップロードもしてあります。 スタイルシートの解説をしているサイトさんを見ても、 何が間違っているのかわかりませんでした。 なぜ背景が表示されないかわかる方いらっしゃいますか？ 余白やスクロールバーはきちんと表示されているのですが・・・
- ベストアンサー
- CSS
- CSSで背景画像マウスオーバー
スタイルシートのマウスオーバーについて質問です。 <div class="AAA"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .AAA { background-image: url("http://xxxxx_back.gif") } 上記の状態で、「xxxxx.gif」の背景に「xxxxx_back.gif」を表示させるまでは 思い通りに出来たんですが、 背景表示はマウスオーバーの時だけにしたかったので、 <div class="BBB"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .BBB a:hover { background-image: url("http://xxxxx_back.gif") } という風にしたんですが、 BBBにすると、オーバー時の表示は出来ましたが、背景画像がズレてしまいます。 AAAの時の表示位置は正確です。 AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、 何故でしょうか。 ※safariで検証しました。 ※style="margin-top: 22px;"は都合上入れてます。
- ベストアンサー
- ブログ
- WindowsのFirefoxでの背景画像の表示（CSS）
WindowsのFirefox（Ver.2.0.0.12）での背景画像の表示について質問です。 下記の様なCSSで、下寄せでX方向に画像を並べ、グラデーションで背景色と馴染むようなデザインにしたいのですが、背景色しか表示されません。 他のブラウザでは上手くいくのですが、原因がわかりません。 Dreamweaverで作っております。 body { background-image: url(img/site/bg.jpg); background-repeat: repeat-x; background-position:bottom; background-color: #826243; } どなたかご教授いただけませんでしょうか。 宜しくお願いいたします。
- ベストアンサー
- CSS
- CSSで背景画像を設定する
<html> <head> <title>--------</title> <style type="text/css"> body{background-image:url(image/-----.jpg)} </style> </head> ～～～ 画像を設定しましたが別のファイルではこの設定で表示できましたがこのファイルでは背景画像が設定できません。
- ベストアンサー
- HTML
