background-image CSSが動作しない

Question

私はブートストラップを持つシンプルなサイトを構築しており、バックグラウンドイメージのCSSスタイリングが機能しないようです。私はそれを私のウェブサイトの最初のセクションである私の.jumbotron divに入れたいと思っています（navbar以外に、それは英雄セクションと呼ばれることもあります）。

ここは私のコードですが、どこが間違っていましたか？

.main-banner { 
    background-image: url("../img/collection-of-classic-cars.jpg") no-repeat; 
} 

<section> 
    <div class="jumbotron"> 
     <div class="container"> 
      <div class="main-banner"></div> 
      <h1>Welcome!</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      <a class="btn btn-primary btn-lg" href="#name" role="button">Contact us</a> 
     </div> 
    </div> 
</section> 

ファイルパス：あなたがbackground-imageプロパティに何のリピートを使用してはならない

/img/collection-of-classic-cars.jpg

Answer 1

、それがバックグラウンド速記内で使用されるので、この方法を行うことができます：

.main-banner { 
    background-image: url("../img/collection-of-classic-cars.jpg"); 
    background-repeat: no-repeat; 
} 

http://tympanus.net/codrops/css_reference/background-image/ http://tympanus.net/codrops/css_reference/background-repeat/

Answer 2

イメージURLは、提供しているHTMLではなくrelative to the stylesheetである必要があります。したがって、画像パスが正しくない可能性が最も高いです。他のよくある間違いは、ファイル名の不一致です。 FOO.jpgは、UNIX系のシステムではfoo.jpgと同じではありません。

Answer 3

<div class="main-banner"></div>にはサイズがありません... http://jsfiddle.net/fnw39gco/1/

なし繰り返し、など独自のCSSタグを定義する必要はありません：

背景リピートを：なしリピートをとしてバイコディン述べ

http://www.w3schools.com/cssref/pr_background-repeat.asp

Answer 4

あなたのCSSコードは間違っています。 background-imageプロパティはURLのみを受け入れます。最良の方法は、backgroundの略語を使用することです：

background: url("../img/collection-of-classic-cars.jpg") no-repeat; 

/* Adding even more options */ 
background: #FFF url('img.jpg') center fixed no-repeat; 

/* Which would be the same as */ 
background-color: #FFF; 
background-image: url('img.jpg'); 
background-position: center; 
background-attachment: fixed;