2017-03-10 4 views
1

完全な背景画像をリンク先ページとして表示しようとしていますが、ユーザーがスクロールするとコンテンツが表示されますが、ブラウザの解像度に応じて背景画像の下端が切り取られます。1ページレイアウトで背景イメージの高さを表示する方法は?

私がしようとしている:

https://codepen.io/suez/full/wulBv/

あなたがアイアンマンとの最初の画像の底部が切断されていることがわかります。ここでは

background-attachment: fixed; 
background-size: cover; 

は、問題を示していますcodepenです。ここには完全な画像(https://i.imgur.com/PbV1Grl.jpg)があります。

イメージの高さ全体を表示する方法はありますか?あなたがそれを見るためにさらにスクロールする必要がある場合でも?

答えて

0

background-size100%の高さと幅を使用できます。

と交換

background-size:cover; 

を削除します。

background-size:100% 100%; 
+0

これは歪みます画像(すなわち、その幅/高さの比率) – Johannes

1

あなたはbackground-position: bottom

https://codepen.io/anon/pen/XMMVYo

を追加することができますこれは、ほとんどの場合、完全な高さを表示しませんが、それは意志画像の下部を表示します。

それとも、(この特定の状況で)background-size: containとを使用するには、白の背景色

EDITとそれを組み合わせる:ホワイトは、私は十分に近い見ていない、動作しません。ここで私が何を意味するか、およそのですが、画像の境界でちょうど色がないので、それは、本当に満足ではありません。

https://codepen.io/anon/pen/zZZpMX

2

使用CSS:

background-size: 100% 100%; 
+0

しかし、これは画像(すなわち、その幅/高さの比率)を歪ませます – Johannes

+0

あなたは本当にあなたはhttps://css-tricks.com/perfect-full-pageのような他のトリックを使用することができます-background-image / –

関連する問題