2つの+/+背景画像をどのようにフィットさせるのですか？

こんにちは私はこれをやった：http://inventors.000webhostapp.com と私はそれぞれの背景イメージを画面全体に合わせたいと思っています。絵の1は、すべての画面に収まるが、私は第二1を追加したいとき、私の問題が来る作っ2つの+/+背景画像をどのようにフィットさせるのですか？

html { 
 
    background: url("https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<html> 
 
    <body> 
 
    <div> 
 
     <p>hello</p> 
 
    </div> 
 
\t </body> 
 
</html>

：私はこれを検索し、発見した問題については。私は（ハローの高さ）だけの小さな背景画像を作る

.p1 { 
 
    background: url(1.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.p2{ 
 
\t background: url(2.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="main.css"> 
 
    </head> 
 
    <body> 
 
    <div class="p1"> 
 
     <p>hello</p> 
 
    </div> 
 
\t <div class="p2"> 
 
\t <p>hello</p> 
 
\t </div> 
 
\t </body> 
 
</html>

を作成されなかったここで質問来る：すると、それらの2を作るためにどのような方法がありますイメージはすべてのスクリーンに順番にフィットしますか？

Webページを開いたときにすべての最初のイメージが表示され、下にスクロールすると完全に2番目のイメージが表示されますか？私のポートフォリオには2つ以上の背景画像を配置する予定ですが、これは良い方法です。

出典

2017-06-11 oscar6662

'背景サイズ：カバー;'唯一のイメージは、それが適用されます要素へのフィット感になりますどのように関係します。あなたの例の問題は、背景を持つ要素が実際には小さいことですが、最初の例ではHTML全体に適用されています。 – Axnyff

コメントでAxnyffが指摘したように、background-size:coverは、背景が包含要素を塗りつぶす方法にのみ影響します。これらの要素を画面に表示させるには、vhviewport height unitを使用します。

body, p { 
 
    margin: 0; 
 
} 
 

 
.p1, .p2 { 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    height: 100vh; 
 
} 
 

 
.p1 { 
 
    background-image: url(http://lorempixel.com/400/200/nature/1/); 
 
} 
 

 
.p2{ 
 
    background-image: url(http://lorempixel.com/400/200/nature/2/); 
 
}

<div class="p1"> 
 
    <p>hello</p> 
 
</div> 
 
<div class="p2"> 
 
    <p>hello</p> 
 
</div>

編集：

一つvhユニットは、したがって、ビューポートの高さの1％のビューポートを埋める私の例で100vhの使用に等しいです。

出典

2017-06-11 12:01:43 cfreear

コンテナのサイズを設定する必要があります。コンテナのビューポートサイズは100vh（高さ）と100vw（幅）に設定できます。次の例を参照してください：

html, body { 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.p1 p, .p2 p { 
 
    display:inline-block; 
 
} 
 
.p1 { 
 
    background: url(http://placehold.it/100x100) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height:100vh; 
 
    width:100vw; 
 
} 
 
.p2{ 
 
\t background: url(http://placehold.it/101x101) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height:100vh; 
 
    width:100vw; 
 
}

<div class="p1"> 
 
    <p>hello</p> 
 
</div> 
 
<div class="p2"> 
 
    <p>hello</p> 
 
</div>

出典

2017-06-11 12:01:57

2つの+/+背景画像をどのようにフィットさせるのですか？

答えて

関連する問題