Bootstrap4.1を使ったドットインストール（https://dotinstall.com/lessons/basic_twitter_bootstrap

前提・実現したいこと

ドットインストールでBootstrapを学習中です。
素材である画像をブラウザ（Chrome）で表示させたいのですができません。
どなたか方法を教えていただけないでしょうか？
background:url();にファイル名を入力すればよいのはわかるのですが、ドットインストール内の画像をフォルダに保存しatom内に挿入する方法がわからないんだと思います。

発生している問題・エラーメッセージ

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
  .cover{
    background:url();
    background-size:cover;
  }

</style>

</head> <body> <header> <div class="cover text-white text-center py-5"> <h1 class="display-4 mb-4">Dotinstall App</h1> <a href=""class="btn btn-primary btn-lg">Get It Now!</a> </div> </header> <main>

</main>
<footer></footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body> </html>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body> </html>

該当のソースコード

ソースコード

試したこと

１画像の上で右クリック、名前を付けて保存、background:url();内にフォルダ名、画像名を入力
２画像をatomの展開しているファイル内にドラッグアンドドロップ、その後background:url();に画像名を入力

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

akihiro3

2018/11/27 17:36

url()に入力した事をそのまま教えてください

行動規範の内容に同意します

回答1件

ベストアンサー

見当違いかもですが、、、

ツリー構造が下記の場合

folder
  ∟ img
      画像.jpg
      画像.jpg
  ∟ css
      main.css
      sub.css
  index.html

パスはこのようになりますが大丈夫でしょうか？

css
1　　　　　　　　　　↓　ここ
2background: url('../img/画像.jpg');

追記

質問文のコードをよく見ると
htmlにスタイルを書いてるようですので
その場合のパスは下記のようになります

html
1    background: url(img/画像.jpg);

投稿2018/11/27 17:49

編集2018/11/27 18:01

akihiro3

総合スコア955

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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