cssのbackground-image設定
ドットインストールでcssの学習をしています。
headerに背景画像を埋め込みたいのですが成功しません。
ファイル構成は以下のような感じです。
①css
→styles.css
②my portfolio
→header.png
③index.hml
発生している問題
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; }
試したこと
相対パスが怪しいと思いググってみましたが、どこに問題点があるのか分かりませんでした。
htmlコードもアップしてもらえると助かります。
cssだけだとなんとも言えません。
ご指摘ありがとうございます。
失礼しました。
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>
コメント返信内容は本文におねがいします。
重ね重ね失礼しました。
いまの状態で大丈夫ですか?
HTML/CSSはなるべく省略しないほうがよいです。また、質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
HTMLの「head」部分と「header」部分は、言葉は似ていますが用途が全く違います。「head」部分は、ブラウザで見えないように設定されています。
提示のHTMLとCSSに誤記述や不足部分が無いかを再度見直して、再提示してください。
各コードは、バッククォート3連(```)で囲むことで、コードブロックとして表示されますので、併せて再提示してください。
ファイルの構成(「index.html」「styles.css」「header.png」)が分かるモノを、図示またはテキスト表示されると、より良い回答を得れるかと思います。
初心者アイコンつけてるので「初心者です」は不要かと。質問タイトル、内容は要件だけ書いてください。
解決しました!
質問の形式も整っていない状態で、ご迷惑おかけしました。
非常に勉強になるご指摘ばかりでためになりました。
ありがとうございました。
原因はパス位置の誤りだったのでしょうか?
正直なところ原因の特定がきちんとできたわけではなく、yoshinaviさん、yambejpさんに教わった手順を踏んでいったら治った、という感じです。
①階層の統一 ②my portfolio→myportfolio ③再びフォルダ分け、パス位置設定 をしました。
①の段階で正常に動いたので、何らかの形でパス位置が間違っていたのだと思います。③の時点でもちゃんと動いているのですが、パス位置指定の方法を特に変えた訳ではなく、ファイルの状態も以前に戻しただけなので、最初との違いは謎です。
すっきりしない回答で申し訳ありません。
丁寧なご回答ありがとうございます。
あくまでも推測ですが、どこかにちょっとした、誤字脱字等があったのかも知れませんね。あるいは、キャッシュのクリア不足だったのかも知れません。
解決されたなら良かったです。
大してお役に立てずすみませんでした。
回答3件
あなたの回答
tips
プレビュー