MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

インラインCSSで指定した背景画像が表示できない
https://forums.mozillazine.jp/viewtopic.php?f=30&t=10643		 ページ 1 ／ 1
作成者:  tmz [ 2010年9月10日(金) 18:53 ]
記事の件名:  インラインCSSで指定した背景画像が表示できない
WordPressで作成したtdタグに背景画像を表示するページが、IE8では正常に表示されるのですが、Firefoxでは全く表示されません。

HTML
<td style="width:232px;height:200px;background:url(./wp-content/uploads/2010/06/image.jpg) no-repeat;"><span class="start"><a href="./?page_id=xxx">&emsp;@@@@@</a></span></td>

CSS
.start {color:black; font-size:large;font-weight: bold;}

Web標準ではインライン要素にwidthやheightを記述できないようなことを目にしたので、
width:232px;height:200px;の部分を消してみたり、
backbroundをbackground-imageにしてみたり、
url(./wp-content/uploads/2010/06/image.jpg) のイメージのパス部分をクォーテーション又はダブルクォーテーションで囲ってみたりして試してみましたが、何れもうまく表示できませんでした。

どんな書き方があるのか判りませんが、同じようなことを解消された方がおられましたら、アドバイス頂けると幸いです。

# Web 標準の話題と判断して、Firefox フォーラムから移動しました。by Moderator Hide
作成者:  偶然的通行人 [ 2010年9月19日(日) 20:55 ]
記事の件名:  Re: インラインCSSで指定した背景画像が表示できない
時間が経っているので、もうご覧になっておられないかもしれませんが...。

文法的に正しいかどうかわかりませんが、ご例示の td 要素に対する背景画像のスタイルに関する部分について試したことだけです。

WordPress ではありませんが、手書きで DOCTYPE 宣言が HTML 4.01 Transitional の HTML ファイルを作って試した限りでは
コード:
<td style="width: NNNpx; height: MMMpx; background: url(画像の URL) no-repeat;">　～　</td>

の書き方でも、当方の Windows XP SP3 上の Firefox 3.6.9 ～ 3.6.10 で、問題なく（つまり CSS の記述どおりに）背景画像を表示できています。

background-* の各属性をまとめて background で記述するのではなく、各属性ごとに値を指定して
コード:
<td style="width: NNNpx; height: MMMpx; background-image: url(画像の URL); background-repeat: no-repeat;">　～　</td>

とやっても、同様に背景画像は表示できていますが、tmz さんのところではこちらの記述形式でもダメですか？

NNN や MMM の部分は、セル（ボックス）のサイズを定義する数値です。
画像の URL の部分は、このスタイルが記述されたファイルから見た画像ファイルの相対パスか、そうでなければ絶対パスで書くことになるはずですが、そのあたりの記述に齟齬はありませんよね？

　　｜ 例えば、この HTML + CSS が記述されたファイル（仮に sample.html）
　　｜ と同階層、すなわち
　　｜ 　- sample.html
　　｜ 　- image.jpg
　　｜ のような位置関係に画像ファイルがあるなら、相対パス表記で
　　｜ url(image.jpg)
　　｜ となりますし、
　　｜ 　- sample.html
　　｜ 　- wp-content
　　｜ 　　　└ uploads
　　｜ 　　　　　　└ image.jpg
　　｜ のような位置関係にあれば、
　　｜ url(./wp-content/uploads/image.jpg)
　　｜ となるでしょう。

試した限りでは、少なくとも Firefox（3.5系、3.6系、4.0ベータ）が CSS の background 属性を解釈できないということはないので、何かしらの記述上の問題か、スタイル適用を阻害してる別の問題があるか、そういったところではないでしょうか。
後者については、セーフモードで起動した Firefox でも表示されないかどうか、確認してみてはどうでしょう。
もしセーフモードで表示されるなら、アドオンの何かが阻害原因になっている可能性が濃厚です。
（参考）・セーフモード

部分的ではありますが以上です。役に立たなかったらすみません。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/