バックグラウンドimgは反応しますか？

Question

http://lucasdebelder.be/stack/index.html

1680px幅でそれをチェックアウトすることを確認しますが、それは完全に一緒に並んだが、私は幅が私の画面を大きくしたり小さくしたりあれば、それは私がこの問題を回避する方法はもうどんなアイデアを整列しませんか？

私はDribbble shotを再作成しようとしています。

コードスニペット。

.wrapper { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 80%; 
 
    width: 80%; 
 
    transform: translate(-50%,-50%); 
 
    
 
    background: #F1F1F1; 
 
    box-shadow: 0 0 90px 0 rgba(0,0,0,0.45); 
 
    border-radius: 15px; 
 
    
 
    background-image: url("http://svgur.com/i/3W7.svg"); 
 
    background-position: 129% 38%; 
 
    background-repeat: no-repeat; 
 
    background-size: 752px; 
 
    
 
} 
 
#section0 { 
 
    background-image: url("http://svgur.com/i/3W7.svg"); 
 
    background-position: 100% 0%; 
 
    background-repeat: no-repeat; 
 
    background-size: 750px; 
 
}

<section class="wrapper"> 
 
      <h1>TEST</h1> 
 
      </section>

EDIT：それは、小さなjsfiddleでこれを再現するのは難しい念頭に置いてそれを維持するが、その後、あなたはコードを見ることが。

Answer 1

あなたのコードスニペットは少し壊れているようですが、背景位置にユニットvwを使用して、希望の効果を作り出すことができました。これはビューポートの幅に依存します。

#section0 { 
background-image: url(../img/1/bol.svg), url(../img/1/vlekBG.svg); 
background-position: 0vw bottom, 61vw; 
background-repeat: no-repeat; 
background-size: auto, 750px; 
} 


.wrapper { 
position: absolute; 
top: 50%; 
left: 50%; 
height: 80%; 
width: 80%; 
transform: translate(-50%,-50%); 
background: #F1F1F1; 
box-shadow: 0 0 90px 0 rgba(0,0,0,0.45); 
border-radius: 15px; 
background-image: url(../img/1/vlekBG.svg); 
background-position: 51vw; 
background-repeat: no-repeat; 
background-size: 752px; 

これは、開発者ツールで行った変更であり、イメージングされたままの、ビューポート幅の独立した配置です。

編集：私は2枚の背景画像が#section0