1

画面全体を覆う背景画像があります。ただし、要素を html ファイルに追加すると、背景画像はこの新しい要素の領域のみをカバーし、残りは白になります。

背景が要素の後、画面の下部まで続くことを確認するにはどうすればよいですか?

#backgroundLanding {
  background: url('/assets/images/landing_new4.jpg'); 
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
  top: 0;
}

<div id="backgroundLanding" >


  <div>
  <!--Flight Search Directive-->
  <!--flight-search>
  </div>


    <!--impressum></impressum-->
  </div>
</div>

background-size:cover を使用すると、同じように表示されます。どうすればこれを解決できますか?

4

4 に答える 4

1

ラッパーの位置を固定し、次の css を追加します。

#backgroundLanding {
   position:fixed:
   top:0;
   right:0;
   bottom:0;
   left:0;
   background-size:cover;
}

ただし、これはコンテンツがスクロールしないことを意味します。しかし、それは望ましい効果だと思います。

さらに、新しいコンテンツがドキュメントに動的に追加された場合でも、常に画面いっぱいに表示されます。

于 2014-12-03T10:50:06.880 に答える
0

明示的に言及しない場合、親 Div の高さはその子要素に依存します。そのため、子要素に基づいて背景が表示されます。

親に必要な高さを伝えます。ページ全体に使用したい場合は、本文に背景を指定できます。

于 2014-12-03T10:56:49.233 に答える
0

背景画像でコンテナを塗りつぶしたい場合は、使用background-size: cover;してそれを実現でき、画像は依然としてその解像度比のままです。

ただし、コンテナーがブラウザー ウィンドウに適応していないことが問題のようです。子ノードによってストレッチされます。

@lharby は 1 つの解決策を提供します。別の解決策は次のとおりです。

html, body {height: 100%;} /* I assume #backgroundLanding is a child node of <body> */
#backgroundLanding {
  background-image: url('/assets/images/landing_new4.jpg'); 
  background-size: cover;
  height: 100%;
}

これは私自身のブログでも使用したものです。

于 2014-12-03T10:56:50.493 に答える