teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

補足を追加

2020/08/08 07:23

投稿

Daregada
Daregada

スコア11990

answer CHANGED
@@ -1,1 +1,14 @@
1
- HTMLファイルがあるtemplateディレクトリ(フォルダー)から見ると、master_portfolioフォルダーは2つ上(相対パスで`../..`)にありますから、そこからまたmediaフォルダー→imageフォルダーと辿る必要があります。つまり、相対パスの指定は、`../../media/image/goldwave.png`になります。
1
+ HTMLファイルがあるtemplateディレクトリ(フォルダー)から見ると、master_portfolioフォルダーは2つ上(相対パスで`../..`)にありますから、そこからまたmediaフォルダー→imageフォルダーと辿る必要があります。つまり、相対パスの指定は、`../../media/image/goldwave.png`になります。
2
+
3
+ 追加分:
4
+ 確認用のdiv要素にp要素がひとつしかないので、div要素の背景が見えていません。
5
+ ```HTML
6
+ <div style="padding: 4em 0; background-image: url('../../media/image/goldwave.jpg');">
7
+ ```
8
+ のようにして、divにパディングを設定すると、p要素の上下にできたdiv要素のパディング部分に背景画像が表示されるはずです。
9
+ さらに、
10
+ ```HTML
11
+ <p style="background-color: transparent;">aaa</p>
12
+ ```
13
+ とでもしてやれば、p要素の背景にも背景画像が出ます。
14
+ 実際には、CSSの側で`div * { background-color: transparent; }`みたいなのを書くことになるでしょう。