質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

background-image が反映されない

seika
seika

総合スコア3

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0グッド

0クリップ

260閲覧

投稿2022/12/07 07:09

編集2022/12/07 07:44

イメージ説明### 前提
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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

miyabi_takatsuk

2022/12/07 07:29

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

2022/12/07 07:46

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

回答2

0

ベストアンサー

質問のコメントで申し上げた通りです。
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}

CSS 相対パス、と調べ、
よくよく勉強なさってください。
HTML、CSS、Webページ、サイトを制作する上ではとても重要になります。

投稿2022/12/07 08:20

miyabi_takatsuk

総合スコア9398

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

seika

2022/12/07 17:57

解決しました。 ありがとうございます。 相対パスと絶対パス、調べてみます😊

0

background-size:coverなどを指定されては如何ですか?

投稿2022/12/07 07:22

dtakkiy

総合スコア83

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

seika

2022/12/07 07:48

ありがとうございます! 残念ながらこちらも反映されませんでしが、、、

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。