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

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

ただいまの
回答率

90.45%

  • CSS

    7811questions

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

  • HTML5

    5301questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

背景画像がCSSで表示されません。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 392

WalterMontes

score 12

前提・実現したいこと

ここに質問したいことを詳細に書いてください
HTML,CSSでWebSiteを作っています。iphoneで撮った写真を背景画像として貼るためにCSSにbackground-image: url(ファイル名);と入力したのですが表示されません。

試したこと

HTMLの方では<img>タグで同じ写真を表示できました。

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

写真が大きすぎて背景画像として表示されないということはありますでしょうか。イメージ説明イメージ説明

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2017/08/24 17:58

    2枚の画像は同じものではないでしょうか?

    キャンセル

  • WalterMontes

    2017/08/24 18:06

    すみません、変更しました。

    キャンセル

回答 3

+1

background-image: url(img_163.JPG);
とありますが「stylesheet.css」と同じ階層に画像を配置してますか?

以下の記述を試してください。
同じ階層にある場合
background-image: url(./img_163.JPG);
一つ上の階層にある場合
background-image: url(../img_163.JPG);
一つ上の階層のフォルダの中に場合(imageは例です)
background-image: url(../image/img_163.JPG);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/24 18:10

    同じ階層にあるのでbody {
    margin: 0;
    background-image: url(./img_1603.JPG);
    }
    と書いてみましたが、画像は表示されません。

    HTMLのほうに<img class="newyork" src="img_1603.JPG">と書いたら表示されましたが、CSSでは背景画像を表示できません。

    キャンセル

  • 2017/08/24 18:22 編集

    なるほどそれでしたらプラスでcssの背景画像のサイズを指定してみてください。
    background-size:500px; /*背景画像のサイズ指定*/

    必要ないかもしれませんが、リピート表示のソースも書いておきます
    background-repeat: no-repeat; /*リピートの有無*/

    キャンセル

  • 2017/08/24 18:31

    これでもできない場合はbodyに指定するのではなく、
    body直下をdivタグなどでまとめてから指定した方が良いかと思います。
    <body>
    <div class="wrapper">

    〜〜〜〜コンテンツエリア〜〜〜〜〜

    </div>
    </body>

    キャンセル

  • 2017/08/24 18:38

    失礼しまいた。。見落としていた部分があります。
    元のソースにダブルクウォーテーションが記述されていませんでした。
    ""を()内に記述してください

    誤 background-image: url(./img_1603.JPG);
    正 background-image: url("./img_1603.JPG");

    キャンセル

  • 2017/08/24 20:15

    HTML,画像のファイルとCSSのファイルを違う場所に保存していました。同じ場所にまとめて更新したら背景画像を貼ることができました。ダブルコーテーションを入れずに、background-image: url(img_1603.JPG);で画像を表示することができました。CSSで背景画像を書くときはダブルコーテーションは要らないのでしょうか、いずれにしても背景画像を貼れて良かったです。ありがとうございます。

    キャンセル

  • 2017/08/24 21:11

    表示できてよかったです!
    基本的にbackground-imageの中には""はなくても大丈夫です!
    古いブラウザのバージョンによっては必要な場合ありますが、
    今時のブラウザでしたらHTML5に対応してあるので必要ありません。

    参考までに以下が仕様になります。
    http://www.htmq.com/style/background-image.shtml

    キャンセル

+1

<img>はHTMLから見た階層、url()はCSSから見た階層となります。
HTMLとCSSが同じ階層にあることはあまりないので、たぶん違うでしょう。
そこを正しく設定してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/24 18:31

    キャッシュという可能性も

    キャンセル

  • 2017/08/24 20:12

    HTML,画像のファイルとCSSのファイルを違う場所に保存していました。同じ場所にまとめて更新したら背景画像を貼ることができました。回答いただきありがとうございます。

    キャンセル

check解決した方法

0

HTML,画像のファイルとCSSのファイルを違う場所に保存していました。同じ場所にまとめて更新したら背景画像を貼ることができました。

イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • CSS

    7811questions

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

  • HTML5

    5301questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。