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

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

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

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

CSS

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

Q&A

解決済

1回答

772閲覧

背景画像が表示されないです。

sakusakukun

総合スコア2

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/08/30 12:38

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

background-image 背景画像が表示されない

エラーメッセージ ```背景画像が表示されません。 回答よろしくお願いします。 ### 該当のソースコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <header> <div class="header-wrapper"> <div class="header-left"> <span class="fa fa-airbnb"></span> <a href="#" class="header-btn">概要</a> <a href=="#" class="header-btn">準備</a> <a href="#" class="header-btn">安全</a> <a href="#" class="header-btn">マネープラン</a> <div class="header-right"> <a href="#" class="start-btn">はじめる</a> </div> </div> </div> </header> <div class="top-wrapper"> <div class="tops"> <h1>Airbnbホストになって、暮らしをレベルアップ</h1> <p>宿泊施設の内容を記入</p> </div> </div> </body> </html> ここからCSSです!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! header { height:100px; background-color:gray; } .header-left air{ float:left } .fa-airbnb { } .header-btn{ float:left; display:block; color:black; margin:30px 20px; } .start-btn { color:white; padding:10px 15px; display:block; } .header-right { float:right; background-color: #cc3366; border-radius:10px; margin: 30px 100px 30px 0; } .top-wrappper { background-image:url("airbnb-3399753_1920.jpg"); height: 500px; width:300px; } ```ここに言語名を入力 html css ソースコード

試したこと

youtubeやGoogleで何度も検索しました。

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

ここにより詳細な情報を記載してください。
airbnbのサイトを真似して作ろうと思ったのですが、背景画像が表示されません。
YoutubeやGoogleで検索したのですが、どこが間違っているのかわかりません。
ぜひ回答よろしくお願いします。
しょうもないミスの場合、本当に申し訳ございません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

1T2R3M4

2020/08/30 13:09

airbnb-3399753_1920.jpg はありますか。
sakusakukun

2020/08/30 13:20

safariで検索して、上のURLをコピーしたものです。 あと、フリー素材のサイトの画像のURLをコピーして貼り付けましたが、ダメでした。 どういうところからどのURLを撮ってくれば良いのでしょうか?? やはり、そこが問題なのですかね、、、、 ご回答ありがとうございます。
guest

回答1

0

ベストアンサー

※質問のソースから抜粋

html

1<div class="top-wrapper">

css

1.top-wrappper { 2background-image:url("airbnb-3399753_1920.jpg")3height: 500px; 4width:300px; 5}

htmlで指定しているクラスがCSSに存在しないようです。

  • top-wrapper (HTMLで指定しているクラス
  • top-wrappper (CSSで定義しているクラス

投稿2020/08/30 13:21

attakei

総合スコア2738

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakusakukun

2020/08/30 13:28

すいません。初歩的なミスでした。申し訳ございません。 ご回答ありがとうございます!! 改善したのですが、まだ表示されませんでした。????
attakei

2020/08/30 13:34

質問そのものについているコメントを読みましたが、次のどちらかをしないとだめじゃないかと。 - background-imageとして使おうとしている画像の「URL(httpから始まるフルURL)」を取得して、それを指定する - background-imageとして使おうとしている画像をダウンロードして、cssで指定している名前でcssファイルと同じパスに置く
sakusakukun

2020/08/30 23:52

わかりました。本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問