なぜ背景画像はある場所では動作しますが、別の場所では動作しませんか？

Question

私はいくつかのカスタムワードプレスのテーマに取り組んでいると私のstyle.cssに私は背景画像を使用しています二つの場所を持って、ここでは正常に動作します：

#gallery { 
background-attachment: fixed; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
background-image: url("img/gallery.jpg"); 
min-height: 100vh; 
padding-top: 50px; 
color: white; 
text-align: center; 
} 

が、ここでそれはしていません表示：

#pageHeader { 
background-image: url("img/pageHeader.jpg"); 
overflow: auto; 
overflow-y: hidden; 
text-align: center; 
padding-top: 30px; 
padding-bottom: 30px; 
} 

2番目はpage.phpファイル用で、text-alignなどの他の機能はうまく動作し、背景画像のみが問題になります。もちろん、両方のjpgは同じ場所にあります。

私がチェックしました、それはいくつかの可能性のある問題をすることができ、あなたの説明から

Answer 1

「画像を読み込むことができませんでした」を与えます。たとえば、#pageHeaderが存在しないため（ただし、これに限定されませんが、これに限定されません）、ルールはまったく適用されない可能性があります。または、ルールが#pageHeaderに適用されている可能性がありますが、別のルールがbackground-imageを上書きしている可能性があります。また、iframe内のページがメインページと同じフォルダ内になく、兄弟フォルダ内にない場合は、iframe内から画像への相対的な場所が異なる可能性があります。また、適用されないルールは、ブラウザキャッシュ（ブラウザキャッシュを消去する）やCloudFlareなどのサーバーキャッシュシステムによっては使用できない場合があります。

解決策は、HTMLタグを右クリックして[検査]をクリックし、適用されるCSSルールを確認することです。このルールが適用されている場合は、CSSの適切なバージョンを使用していることがわかっていて、画像がどこから読み込まれているかを見ることができます。この点に達すると、解決策は明らかになります。

Answer 2

解決策は - 私はubuntuでlamppを使用していましたが、何らかの方法ではうまくいかなかったのですが、Windows xamppに戻ってこの問題を解決しました。それは許可のあるものかもしれません。