2017-12-23 10 views
0

私のホームページの最初の<div>に背景画像を追加しようとしています。私はブートストラップ4とカスタムstyle.cssファイルを使用しています。CSSで背景画像を宣言していますが、背景画像が表示されません。

私のHTMLは次のとおりです。

<body> 



    <div id="wrapper"> 
    <nav class="navbar navbar-expand-md navbar-light"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <a href="#" id="text"> 
      text 
     </a> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent navbar-selections"> 

     <div id="select-container"> 

      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item "> 
        <a class="nav-link" href="#">link</a> 
        </li> 
        <li class="nav-item "> 
        <a class="nav-link" href="#">link</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">link</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">link</a> 
        </li> 
        <li class="nav-item "> 
        <a class="nav-link" href="#">link</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">link</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">link</a> 
        </li> 
      </ul> 

     </div> 

     <div id="phone-number"> 
     <ul>   
     <li class="nav-item"> 
      <a class="nav-link" href="#">555.867.5309</a> 
      </li> 
     </ul> 
     </div> 

     </div> 

    </nav> 

    </div> 

    <div class="index-intro"> 




    </div> 

と私のCSSは以下の通りです:

.index-intro { 

     background: url(img.JPG); 
     background-repeat: no-repeat; 
     background-size: 100% 100%; 

    } 

しかし、私の背景画像は、上部のナビゲーションバーでちょうど白い画面が表示されません。私は非常に混乱していて、いくつかのアプローチを試してみました。例えば

、私は以下のようにdivの内側に画像を置く場合:

<div class="index-intro"> 

    <img src="img.jpg"> 


     </div> 

これは、ページ全体を占め、ナビゲーションバーの上に重なっています。

div内にnavbarが含まれていると、ナビゲーション画像内に背景画像が表示され、残りのページは空白になります。

ページの残りの部分のナビゲーションバーのすぐ下に背景イメージを作成する方法に関するアイデアはありますか?

+0

背景:url( "img.JPG");二重引用符を使用し、画像パスが正しいことを確認してください。画像は要素ではなく背景として機能するので、コンテナの幅と高さについて言及してください。 –

答えて

0

画像全体を表示する場合は、.index-introの幅と高さが画像のサイズに等しいことを確認する必要があります(または、画像を表示する場合は任意のサイズその一部)。あなたはdivの中に何も入れていないのでスクリーンは白です。したがってサイズはゼロです。試してみてください:

.index-intro { 
    background: url(img.JPG); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    width: 500px; 
    height: 300px; 
} 
+0

パーフェクト。 navbarの後に残りの画面サイズを埋めるようにしたいとしたら、それを簡単に行う方法はありますか? –

+0

うん。それの位置を設定してください:絶対;幅:100%;高さ:100%;これにより、画像がビューポート全体を覆うようになります。試してみると、私の言いたいことがわかるはずです。調整したら、topとbottom CSSのプロパティを使って位置を変更します。しかし、このdivの中にコンテンツを入れないでください。代わりに、主なコンテンツのためにその下に別のdivを作成します。このindex-intro divは、絶対位置としてその位置を設定した場合にのみ、画像を提供するために使用してください。 – AmN

関連する問題