HTML/CSSの背景イメージは要素には適用されますが、クラスセレクタには適用されません。

私の人生のために、私はこれを働かせることはできません、どんな助けも大いに感謝されるでしょう！HTML/CSSの背景イメージは要素には適用されますが、クラスセレクタには適用されません。

divクラスに背景画像を適用しようとしていますが、何らかの理由で画像が表示されませんが、同じ画像をボディに適用すると完全に動作します。新しいhtml/cssテストするファイル、それを使って遊ぶ、以下の例を参照してください。

これは

HTML

<body> 
    <div class="topNav"> 
    <p>Content here</p> 
    </div> 
</body>

CSS

body { 
    background-image: url("images/topNav-bg.png"); 
    background-repeat: repeat-x; 
}

このdoesntのを作品

<body> 
    <div class="topNav"> 
    <p>Content here</p> 
    </div> 
</body>

CSS

私はこの問題を抱えている可能性がありますが、どのような理由が考えられるのでしょうか？私はdivにもIDを追加しようとしました、それは働くかもしれないより具体的な考え方で、私はdivクラスの幅と高さを100％考えてみましたが、サイズが設定されていれば動作しますが、それが事実であったなら、それは確かに身体の要素で働かないだろうか？私のCSSファイルはリンクされていて、イメージへのパスもすべて正しいです。そうでなければ、body要素にCSSルールを適用すると確実にうまくいきませんか？これは本当に基本的なようですが、今は私を悩ませています！次のように事前に

おかげで、

ジェイミー

EDIT

は私の作業ページ内の実際のコードは次のとおりです。 HTML

<div class="topNav"> 
     <ul> 
     <li><a href="#">Log in</a></li> 
     <li><a href="#">Create account</a></li> 
     <li><a href="#">Contributions</a></li> 
     <li><a href="#">Talk</a></li> 
     <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Not logged in</li> 
     </ul> 
    </div>

CSS

.topNav { 
    margin: 0px 0px 0px 176px; 
    background-image: url('../images/topNav-bg.png') !important; 
    background-repeat: repeat-x; 
    height: 40px; 
    width: 90.83%; 
}

私はそれが他の何か他のスタイリングをdivから取り除いた後にそれを繰り返したが、私が問題を分離しようとする例を作った理由は、他の何かが干渉していると思った。

出典

2016-09-17 Jamie Bullock

'.topNav'には他にどのようなスタイルが適用されますか？あなたが直面していることの実際の例を共有することはできますか？ – 4140tm

divをクローズしていないか本体がありません – MatejMecka

あなたはCSSファイルでconectionを書いていますか？ – TwoDent

body div .topNav { 
    background-image: url("images/topNav-bg.png"); 
    background-repeat: repeat-x; 
}

私は、これはあなたがdiv要素を使用している

出典

2016-09-17 16:50:16

ええ、これは（上の答え）はボディではなく、トップナヴァは奇妙なことに、コンマでスペースだけで動作していないのはなぜですか？それは特異性と関係がありますか？先端をありがとう、それを試みるhadntの考え！ –

try body div .topNav {} –

はいスペースは、複数のクラスまたはタグに対してCSSを定義する際にセパレータとして機能します。 –

、あなたは高さと幅を設定する必要が働くかもしれないと思います。

<style type="text/css"> 
.topNav{ 
    background-image: url("http://mejorconsalud.com/wp-content/uploads/2014/06/manzanas.jpg"); 
    background-repeat: repeat-x; 
    height: 500px; 
    width: 500px; 
} 
</style>

ああ、私は忘れて、プロパティリピート-Xのdivといけない仕事...

出典

2016-09-17 16:51:51 TwoDent

はあなたではないulに適用されるいくつかの継承されたスタイルや、そのようなは、おそらくありますコンテンツを折りたたむ私たち（例えば、float）を示しています。

は、次のスタイルを適用してみてください。スタイルは継承を積み重ね起動したときに

.topNav:after { 
    content:''; 
    clear:both; 
    display:block; 
}

は時々あなたが対処する必要が問題となります。そのようなシナリオの1つは、floatを使用する場合です。その後、floated要素は折りたたまれてしまい、高さを持たないかもしれません。

出典

2016-09-17 17:08:42 4140tm

HTML/CSSの背景イメージは要素には適用されますが、クラスセレクタには適用されません。

答えて

関連する問題