63542


プログラミング超初心者なので用語の使い方が間違ってたらすみません。

CSSに書き込んだ、background-imageだけが反映されません。他は反映されています。  
htmlはこのようになっていて、

[![画像の説明をここに入力](https://i.stack.imgur.com/L9mtZ.png)](https://i.stack.imgur.com/L9mtZ.png)

.listに書き込んだものは反映されるのに.contentsに書き込んだbackground-imageだけ反映されません。  
コードはこのように書きました。

[![画像の説明をここに入力](https://i.stack.imgur.com/Amy0A.png)](https://i.stack.imgur.com/Amy0A.png)

background-colorだと反映されました。  
自分でもいろいろと調べて、  
・`background-image: url("画像ファイルへのパス") !important;` でやってみる  
・大きさを `px` で指定する  
・大きさを `%` で指定する  
・`background: url("画像ファイルへのパス");` でやってみる  
以上のことは試しましたが、何の変化もありませんでした。

何かほかに解決策がないか教えていただきたいです。

> 質問者さんの抱えている問題が再現可能なソースコードを質問文へ追記していただけませんか？また、画像や HTML
> ファイルを含めたディレクトリ構造をツリー形式で教えていただけませんか？

理解しきれなかったのでとりあえず書いたものを、urlやパスは消してすべて持ってきました。

[code]

    $(function() {
    
      $('details').hover(function() {
    
        $(this).fadeIn();
     
      }, function() {
    
        $(this).fadeOut();
     
      });
    });
[/code]

[code]

    .contents{
     background-image: url("");
    }
    .list {
     position: relative;
     text-align: center;
    }
    .list span.details {
        display: none;
    }
    .list a:hover span.details {
        background: none repeat scroll 0 0 #EEFFEE;
        border: 1px solid #CCCCCC;
        color: #000000;
        display: block;
        line-height: 1.2em;
        margin: 0.5em;
        padding: 0.5em;
        position: absolute;
        top: 50px;
        width: 12em;
    }
[/code]

[code]

    <!doctype html>
    
    <html lang="jp">
    <head>
      <meta charset="utf-8">
    
      <title>Hello</title>
      <meta name="description" content="">
      <meta name="author" content="SitePoint">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="./css/index.css">
      <script type="text/javascript" src="script\script.js"></script>
      <style type="text/css">
      </style>
    </head>
    <body>
    <div class=contents>
    <div class=list>
      <a href="">あいうえお
        <span class="details">かきくけこ</span>
      </a>
    </div>
    <div class=list>
      <a href="">さしすせそ
        <span class="details">たちつてと</span>
      </a>
    </div>
    <div class=list>
      <a href="">なにぬねの
        <span class="details">はひふへほ</span>
      </a>
    </div>
    <div class=list>
      <a href="">まみむめも
        <span class="details">やゆよ</span>
      </a>
    </div>
    </div>
    </body>
    </html>
[/code]

> 追記いただきありがとうございます。jsFiddle
> 上で当該コードが正常に動作し、背景画像が表示されることを確認しました。もしよろしければ、問題が再現可能なソースコードをいただけませんか？また、ディレクトリ構造に関しても、教えていただけると幸いです。

すみません、問題が再現可能なソースコードという部分がよくわかりません。  
ディレクトリ構造はこちらでよろしいでしょうか？

[![画像の説明をここに入力](https://i.stack.imgur.com/U1yfB.jpg)](https://i.stack.imgur.com/U1yfB.jpg)

> 「絶対パス」と伏せられている文字列をそのままブラウザーのアドレスバーに貼り付けた際、きちんと画像は表示されますか？

表示されました。`D:\～` とはじまるものですが、あっていますか？


CC BY-SA 4.0
2020-03-03T11:29:38.253
63527
2020-03-04T13:57:36.500
2020-03-04T00:27:13.543
3060
38060
question
html css
CSS の background-image で指定した画像が反映されない


> D:\～とはじまるものですが、あっていますか？

D:\～ という形式はセキュリティ上、表示できません。仮にbackgroud-
imageとして表示されたとしても、このファイルは質問者さんのパソコンにしか存在しないため、第三者の環境では表示されることはないわけですが、HTMLの作成目的を見失っていませんか？


CC BY-SA 4.0
2020-03-03T12:29:32.217
63530
2020-03-03T12:29:32.217
4236
63527
answer


CSSの`url()`の中に書くのは、URLです。ファイルパスではありません。URLなのでディレクトリ区切りは `\` ではなく `/` です。この場合、

[code]

    background-image: url(file:///D:/Users/foo/.../img/bar.png);
    
[/code]

のように `file:///` で始める絶対URLにするか、

[code]

    background-image: url(../img/bar.png);
    
[/code]

のように相対URLにすると上手くいくと思われます。


CC BY-SA 4.0
2020-03-04T00:10:23.420
63542
2020-03-04T13:57:36.500
2020-03-04T13:57:36.500
3475
3475
63527
answer