background-imageを用いてtableタグに画像を挿入したい。

前提・実現したいこと

テーブルタグのHTMLにCSSのbackground-imageを適用させたい。

発生している問題・エラーメッセージ

HTMLにクラスを指定して、CSSを適用させたいのですが、表示されません。
初歩的な質問ですが、間違いを指摘していただきたいです。

該当のソースコード

HTML

	<tr>
		<td class="icon dog">ワンちゃん</td>
		<td>50cm</td>
		<td>30kg</td>
		<td>1999/0916</td>

CSS

table td.icon.dog{
background-image: url(images/dog.png)
}

試したこと

・画像の格納場所の確認
・ファイル名の確認
・パスの指定方法

画像は『imagesフォルダに格納しております。』
名称は『dog.png』です。

パスの指定の仕方が間違っているのでしょうか？

初歩的な質問ですが、ご回答いただけると幸いです。

Lhankor_Mhy

2020/08/01 06:21

開発者ツールの「Styles」で、background-imageのパスの上で右クリックし、「Open in new tab」とすると、どうなりますか？

tmy1496

2020/08/01 06:59

修正依頼ありがとうございます！現在、他の方からいただいた回答を参考に修正作業をしていますので、少々お待ちいただけると幸いです！

tmy1496

2020/08/01 07:06

大変お待たせいたしました！ファイルが見つかりませんでした移動または削除された可能性があります。 ERR_FILE_NOT_FOUND とのページに遷移しましたので、私のパスの書き方が間違っているのだと判断できました^^::

行動規範の内容に同意します

回答3件

ベストアンサー

よく分からないことを質問するときには独自の判断で一部抜粋などせず、ソースの全てを公開してください
タグの閉じ忘れなどないかとかチェックできません。

一見して気づいたのは2行目の</tr>がない。（これは独自判断で一部抜粋したため本当は</table>までちゃんとあると仮定）

次にきづいたのはCSSのbackground-image: url(images/dog.png)の最後にセミコロンが無い。
いくら正しい値を指定してもセミコロンがないとブラウザがちゃんと解釈してくれません。

気づいたところを直したコードを張ります。面倒なのでCSSファイルを<style>タグで1つにしてます。

html
1<!DOCTYPE html>
2<html lang="jp">
3    <head>
4        <meta charset="UTF-8" />
5        <title>background-image</title>
6    </head>
7    <body>
8        <table>
9            <tr>
10                <th>お名前</th>
11                <th>身長</th>
12                <th>体重</th>
13                <th>生年月日</th>
14            </tr>
15            
16            <tr>
17                <td class="icon dog">ワンちゃん</td>
18                <td>50cm</td>
19                <td>30kg</td>
20                <td>1999/0916</td>
21            </tr>
22        </table>
23
24        <style>
25            table td.icon.dog{
26                background-image: url(images/dog.png);
27            }
28        </style>
29
30    </body>
31</html>