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

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

ただいまの
回答率

88.92%

background-imageがブラウザによって表示されません。

解決済

回答 2

投稿 編集

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

chair

score 13

Chorme,edgeブラウザは表示されるのですが、safari,IEだと表示されません。

cssファイル内の全てのbackground-imageがそうなので、コードの書き間違えではないと思うのですが、原因がわかりません。
コードは下記のような書き方で書いております。
ベンダープレフィックスを書いてみましたが、変化なしでした。

ご教示願います!

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airbnb</title>
    <link rel="canonical" href="">
    <link rel="stylesheet" href="reset.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
 <!-- メインビジュアル スタート -->
        <article class="main-v">
            <section class="select-box">
                <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
                <p>宿泊施設の内容を記入</p>
                <!-- 選択バー×3 スタート -->
                <form class="select-three" action="" method="post">
                    <input type="text" autocomplete="on" list="p-list" name="place" 
                        class="place" value="東京"  placeholder="ロケーション">
                    <datalist id="p-list">
                        <option value="日本、東京都"></option>
                        <option value="東区東京塚町 日本、熊本県熊本市"></option>
                        <option value="中央区東京塚町 日本、熊本県熊本市"></option>
                        <option value="日本、新潟県上越市"></option>
                        <option value="中央区東京塚町 日本、熊本県熊本市"></option>
                    </datalist>
                    <select name="room-type" class="room-type">
                        <option value="reserved">まるまる貸切</option>
                        <option value="private-room">個室</option>
                        <option value="shared-room">シェアルーム</option>
                    </select>
                    <select name="guest" class="guest">
                        <option value="guest-1">ゲスト1人</option>
                        <option value="guest-2">ゲスト2人</option>
                        <option value="guest-3">ゲスト3人</option>
                        <option value="guest-4" selected>ゲスト4人</option>
                        <option value="guest-5">ゲスト5人</option>
                        <option value="guest-6">ゲスト6人</option>
                        <option value="guest-7">ゲスト7人</option>
                        <option value="guest-8">ゲスト8人</option>
                        <option value="guest-9">ゲスト9人</option>
                        <option value="guest-10">ゲスト10人</option>
                        <option value="guest-11">ゲスト11人</option>
                        <option value="guest-12">ゲスト12人</option>
                        <option value="guest-13">ゲスト13人</option>
                        <option value="guest-14">ゲスト14人</option>
                        <option value="guest-15">ゲスト15人</option>
                        <option value="guest-16">ゲスト16人</option>
                    </select>
                </form>
                <a class="start" href="">はじめる</a>
                <!-- 選択バー×3 ラスト -->
            </section>
        </article>
        <!-- メインビジュアル ラスト -->
    <script src="jQuery.js"></script>
    <script src="fitie.js"></script>
   </body>
/* メインビジュアル スタート */

.main-v {
    width: 1263px;
    height: 681px;
    margin: 0 auto;
    box-shadow: 0px -200px 200px rgba(0, 0, 0, 0.4) inset;
    position: relative;
    background-image: url(./img/mv.jpg);
    background-repeat: no-repeat;
    background-position: 0 81px;
    background-size:cover;
}

.select-box {
    width: 460px;
    height: 423px;
    padding: 35px;
    background-color: #ffffff;
    position: absolute;
    top: 159px;
    left: 711px;
}

.select-box h1 {
    font-size: 40px;
    font-weight: 800;
    line-height: 40px;
    color: #333333;
    letter-spacing: -1px;
}

.select-box p {
    font-size: 16px;
    font-weight: 600;
    margin: 30px 0 10px 0;
}

/* 選択バー×3 スタート */

.select-three {
    margin-bottom: 33px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.place {
    width: 392px;
    line-height: 44px;
    border: solid 1px rgba(176, 176, 176, 0.3);
    border-radius: 5px;
    padding-left: 10px;
    margin-bottom: 10px;
}

.room-type {
    width: 220px;
    line-height: 44px;
    border: solid 1px rgba(176, 176, 176, 0.3);
    border-radius: 5px;
    padding-left: 10px;
    margin-right: 18px;
    background-image: url(./img/chevron-down-solid.svg);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: right 10px center;
}

.guest {
    width: 151px;
    line-height: 44px;
    border: solid 1px rgba(176, 176, 176, 0.3);
    border-radius: 5px;
    padding-left: 10px;
    background-image: url(./img/chevron-down-solid.svg);
    background-repeat: no-repeat;
    background-size: 14px 18px;
    background-position: right 10px center;
}

.start {
    display: block;
    width: 396px;
    background-color: #ea2253;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 48px;
    border-radius: 8px;
}

/* 選択バー×3 ラスト */

/* メインビジュアル ラスト */
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • miyabi_takatsuk

    2020/07/12 20:35

    HTMLと、他の部分のCSSが影響しているかもしれないので、
    質問本文に記載お願いします。

    キャンセル

  • Daregada

    2020/07/12 22:52

    ええと、提示されているHTMLとCSSと適当な画像を./img/mv.jpgにしたものだと、IE11でも(ChromeやEdgeでも)background-imageが表示されたので、reset.cssやresponsive.cssなどを読み込んでいる部分をいったんコメントにして確かめてみてください。

    キャンセル

回答 2

checkベストアンサー

+1

PNG画像を「.jpg」拡張子にしてしまっている、などファイルに起因する問題があるかもしれません。

画像をPhotoshopなどで開いて別名で保存、などしてみると解決するかもしれないので、打つ手がないなら試してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/15 21:42

    元の画像をコピーしてペイントアプリで保存して使ったら表示されました!
    new1roさんの言うとおり、原因は画像ファイルに起因するものだったようです。
    photoshopで開こうとしたら、開けない画像でした。
    コードばかりに気をとられて、気づかなかったです。
    アドバイスありがとうございました!

    キャンセル

-2

画像ファイルのパスに間違いはありませんでしょうか?

background-image: url("./img/mv.jpg");

でもダメでしょうか

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/12 20:32

    CSSの、urlメソッド内に"は必要ありません。無くても正常に動きます。
    どのブラウザでも。

    キャンセル

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

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

関連した質問

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