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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Atom(言語)

Atomはハードウェア記述言語で、集積回路を設計するためのコンピュータ言語です。

CSS

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

解決済

初心者です。cssのbackground-image設定でつまずいてます。

mohun
mohun

総合スコア0

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Atom(言語)

Atomはハードウェア記述言語で、集積回路を設計するためのコンピュータ言語です。

CSS

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

3回答

0評価

0クリップ

8閲覧

投稿2019/03/08 09:54

編集2022/01/12 10:58

cssのbackground-image設定

ドットインストールでcssの学習をしています。
headerに背景画像を埋め込みたいのですが成功しません。
ファイルは「プログラミング」フォルダ内に「css」フォルダと「my portfolio」フォルダがあり、「css」フォルダ内に
「styles.css」が、「my portfolio」フォルダ内に「header.png」がある状態です。

発生している問題

backlground-imageが反映されません。
header内の他のプロパティ?は問題なく動いています。

##当該ソースコード

html

<!DOCTYPE html> <html lang="ja"> <head> <meta chrset="utf-8"> <title>太郎のポートフォリオサイト</title> <link rel="icon" href="my portfolio/favicon.ico"> <meta name="description" coment="太郎のポートフォリオサイトです。"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <nav> <ul> <li> <a href="index.html">HOME</a> </li> <li> <a href="about.html">ABOUT</a> </li> </ul> </nav> </header>

css(css/style.css内)

header { background-color: pink; text-align: right; padding: 10px; background-image: url(../my portfolio/header.png); } header ul { margin: 0; list-style-type: none; padding-left: 0; }

試したこと

相対パスが怪しいと思いググってみましたが、どこに問題点があるのか分かりませんでした。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

mutsuki22
mutsuki22

2019/03/08 09:56

htmlコードもアップしてもらえると助かります。 cssだけだとなんとも言えません。
mohun
mohun

2019/03/08 09:59

ご指摘ありがとうございます。 失礼しました。 headの部分だけですが、以下です。 <!DOCTYPE html> <html lang="ja"> <head> <meta chrset="utf-8"> <title>太郎のポートフォリオサイト</title> <link rel="icon" href="my portfolio/favicon\.ico"> <meta name="description" coment="太郎のポートフォリオサイトです。"> <link rel="stylesheet" href="css/styles\.css"> </head>
mutsuki22
mutsuki22

2019/03/08 10:03

コメント返信内容は本文におねがいします。
mohun
mohun

2019/03/08 10:06

重ね重ね失礼しました。 いまの状態で大丈夫ですか?
kei344
kei344

2019/03/08 10:15

HTML/CSSはなるべく省略しないほうがよいです。また、質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
yoshinavi
yoshinavi

2019/03/08 10:22

HTMLの「head」部分と「header」部分は、言葉は似ていますが用途が全く違います。「head」部分は、ブラウザで見えないように設定されています。 提示のHTMLとCSSに誤記述や不足部分が無いかを再度見直して、再提示してください。 各コードは、バッククォート3連(```)で囲むことで、コードブロックとして表示されますので、併せて再提示してください。 ファイルの構成(「index\.html」「styles\.css」「header\.png」)が分かるモノを、図示またはテキスト表示されると、より良い回答を得れるかと思います。
m.ts10806
m.ts10806

2019/03/08 13:55

初心者アイコンつけてるので「初心者です」は不要かと。質問タイトル、内容は要件だけ書いてください。
mohun
mohun

2019/03/08 15:05

解決しました! 質問の形式も整っていない状態で、ご迷惑おかけしました。 非常に勉強になるご指摘ばかりでためになりました。 ありがとうございました。
yoshinavi
yoshinavi

2019/03/08 15:21

原因はパス位置の誤りだったのでしょうか?
mohun
mohun

2019/03/08 16:13

正直なところ原因の特定がきちんとできたわけではなく、yoshinaviさん、yambejpさんに教わった手順を踏んでいったら治った、という感じです。 ①階層の統一 ②my portfolio→myportfolio ③再びフォルダ分け、パス位置設定 をしました。 ①の段階で正常に動いたので、何らかの形でパス位置が間違っていたのだと思います。③の時点でもちゃんと動いているのですが、パス位置指定の方法を特に変えた訳ではなく、ファイルの状態も以前に戻しただけなので、最初との違いは謎です。 すっきりしない回答で申し訳ありません。
yoshinavi
yoshinavi

2019/03/08 16:27

丁寧なご回答ありがとうございます。 あくまでも推測ですが、どこかにちょっとした、誤字脱字等があったのかも知れませんね。あるいは、キャッシュのクリア不足だったのかも知れません。
mutsuki22
mutsuki22

2019/03/11 00:56

解決されたなら良かったです。 大してお役に立てずすみませんでした。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Atom(言語)

Atomはハードウェア記述言語で、集積回路を設計するためのコンピュータ言語です。

CSS

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