Q&A
前提・実現したいこと
class="top-img"にimg01.jpgを背景画像として設定したい
プログラミング初心者で、背景画像でつまずくことが多いです。
原因は入力ミスやフォルダ名間違いなのですが、今回は見直してもわかりませんでした。
発生している問題・エラーメッセージ
背景画像が反映されない
該当のソースコード
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> <title>corporatesite</title> </head> <body> <header> <div class="top-img"> <div class="top-text"> <h1>Corprate Site</h1> <p>会社情報を伝えるサイトです。</p> </div> </div> </header> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
* { margin: 0; padding: 0; } .top-img { background-image: url(..images/img01.jpg); }
試したこと
CSSに対して、1つ上の階層の画像フォルダimagesの中にimg01.jpgがあります
補足情報
回答1件
0
ベストアンサー
スラッシュが抜けています。正しくは↓
css
1background-image: url(../images/img01.jpg);
投稿2020/12/02 15:00
総合スコア1907
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/03 12:16