div内に背景画像が表示されない

作業中のリンク先ページを作成しようとしています。何らかの理由で、ここに表示されている背景イメージが関連するHTMLとCSSです。div内に背景画像が表示されない

<div class="jumbotron"> 
    <div class="top-bar"> 

     <div class="top-bar-left"><img src="img/AzlanLogo.png"></div> 
     <div class="top-bar-right"><img src="img/MicrosoftLogo.png"></div> 

    </div> 

    <div class="header-container"> 
    <div class="header-left"></div> 

    <div class="header-right"><p><a class="btn btn-primary btn-lg" href="#" role="button">Download file</a></p> 
     <p><a class="btn btn-primary btn-lg right" href="#" role="button">E-mail to friend</a></p></div> 
    </div> 

</div>

とCSS

.header-container { 
    background-image: url('img/bg-header.png'); 
    height: 229px; 
    width: 1013px; 
    margin: 0px auto; 

} 

.header-left { 
    width: 30%; 
    float: left; 
} 

.header-right { 
    width: 70%; 
    float: right; 
}

Googleのdevのツールでチェックし、画像URLが正しいです。画像が表示されないのはなぜですか？

答えに十分な情報を提供することを希望します。

出典

2016-05-25 Muhammad Ali

自分の資産にリンクすると、コードが機能しているようです。

それは間違っている資産への可能性の高いパス以上で、ルールに完全なドメインを追加してみてください：

background-image: url('http://www.yourdomainhere.com/img/bg-header.png');

それはデバッグのため<head>内容POST動作しない場合。

出典

2016-05-25 08:57:12

ありがとう、ローカルバージョンでした。しかし、私は今、ファイルをサーバーにアップロードし、絶対的なリンクを使用しました。そのトリックをするようだ。理由はわかりませんが、私はなぜですか？ :) –

これは確かに私に約何かではありません。イメージソースプロパティでは必ず完全なサイトパスを使用しないようにしてください。特に、外部サーバーからイメージを参照している場合、これは悪い習慣です。 – snkv

あなたが提供したコードがオンラインの場合、次のようにウェブホスティングやサーバーXAMPP/MAMPなどでローカルに編集されている上に格納され、あなたのイメージパスは次のようになります。

注：これをあなたのHTMLに適用されることを意図しています。 CSSでは、現在のデフォルトのurl（）はうまく動作しているはずです。 img/AzlanLogo.png前

<img src="../img/AzlanLogo.png">

../指定されたファイルを見つけ、その後、戻ってあなたのimgフォルダのメインディレクトリで検索するには、ブラウザに指示します。

出典

2016-05-25 09:06:01 snkv

も試しました。 :) –

試用の瞬間にファイルが利用可能になっているか、アップロードされていますか？ – snkv

非常に確かに、私はリンク上をぶら下がったときにGoogleコンソールに画像が表示されました。どんな理由であれ、それは表示されませんでした。 –

div内に背景画像が表示されない

答えて

関連する問題