background-image が反映されない

### 前提
background-imageが反映しない
background-color は反映するがimageが反映されない
画像はimages フォルダの中に入っている

実現したいこと

div 内にbackground-imageをつける

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

background-imageが反映しない

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="/css/styles.css">
9</head>
10<body>
11    <div class="box"></div>
12</body>
13</html>

css
1.box {
2    width: 300px;
3    height: 300px;
4    border: 10px solid black;
5    margin: 0 auto;
6    background-image: url("images/pexels-laura-james-6102583.jpg");
7}
8

miyabi_pudding

2022/12/07 07:29

画像へのパスは合っておりますか？相対パスの場合、 HTMLからではなく、 CSSファイルを基準としたパスになります。わからなければ、ディレクトリ構造のキャプチャを、質問本文に載せて下さい。

seika

2022/12/07 07:46

質問にファイルのスクリーンショットを貼ったので見て頂けると有り難いです

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

回答2件

ベストアンサー

質問のコメントで申し上げた通りです。
CSSにて使用する画像へのパスは、
CSSファイルからの基準となります。
読み込んでいるHTMLが基準ではありません。

css
1.box {
2    width: 300px;
3    height: 300px;
4    border: 10px solid black;
5    margin: 0 auto;
6    /* パスの階層を一個上げる */
7    background-image: url("../images/pexels-laura-james-6102583.jpg");
8}