2016-08-16 5 views
0

だから私は100vhでカバーに画像を設定しようとする - しかし、私は非常に特定の状況があります。100vhの背景カバー画像

私のイメージでは、私は大きなプレートとタブレットがこのプレートに "横たわっています"。

私の目標はこの画像を100vhヘッダーにすることですが、問題があります。私は大きなモニタでこれを試してみると大丈夫だと思っていますが、小さな高さのモニタでは見栄えが悪いです。すべてのデスクトップデバイスに表示されます。

「フルページ」オプションで自分のフィドルをチェックして、私のことを確認してください。

また、タブレットなしでこの画像カバーを作ってから、別の画像をタブレットとposition:absoluteに配置しようとしましたが、私の2番目の画像は、

私が望むものを達成することは可能でしょうか?

.cover { 
 
    position: relative; 
 
    height: calc(100vh - 80px); 
 
    background-size: cover; 
 
    background-position: bottom; 
 
    background-repeat: no-repeat; 
 
    background-image: url(https://s4.postimg.org/uwxudv17x/cover.png); 
 
}
<body> 
 
    <div class="cover"> 
 
    </div> 
 
</body>

答えて

1

すべてのデスクトップデバイスへの高速回避策は

background-position: bottom right; 
+0

[OK]を設定することになりますが、私はもう一つのことを言わなければならない - 私のページに私は80px高さを持っているナビゲーションを持っています。大きな画面では見た目はいいですが、780の高さのような小さいモニターでは、タブレットが完全に見えません。だから多分私はバックグラウンドポジションのようなものが必要です。たぶん私のウェブサイトをチェックして私のことを知ることができますし、助けてください:http://virtualnemenu.pl/ – user2456849

+0

私は正しく理解しているのか分かりませんが、多分margin-top:80pxを追加します。あなたの#ホームヘッダーにこの問題を解決します。 –

+0

Thx - これといくつかの調整が私の問題を解決します。 – user2456849