スプリットとセンタービューポートの高バックグラウンド画像

私は、背景画像と2つのコンテンツの列を持つレイアウトを持っています。この列は、ビューポートの高さの100％とビューポートの幅の50％です（画面を2つの垂直方向の半分に分割します）。背景画像もビューポートが高くなります。スプリットとセンタービューポートの高バックグラウンド画像

右の列をさらに右に移動すると、背景イメージのその部分が移動し、2つの半分の間にギャップが残ります。

すべてがこれまでに動作しますが、私は、ページの中央に背景画像を持っているしたいと思います...

コード：

html, 
 
body, 
 
main { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.main-left, 
 
.main-right { 
 
    height: 100vh; 
 
    width: 50vw; 
 
    position: absolute; 
 
    top: 0; 
 
    background: url('https://unsplash.it/150/150'); 
 
    background-size: auto 100%; 
 
    background-repeat: no-repeat; 
 
    box-sizing: border-box; 
 
} 
 
.main-left { 
 
    left: 0; 
 
    background-position: left 0; 
 
} 
 
.main-right { 
 
    left: 50vw; 
 
    background-position: -50vw 0; 
 
}

<body> 
 
    <div class="main-left"> 
 
    ...left content here ... 
 
    </div> 
 
    <div class="main-right"> 
 
    ...right content here ... 
 
    </div> 
 
</body>

JSFiddle

この今見ているとおりです：

これは、それがどのように見えるべきかです：

をそして、これは私がそれを行うことができるようにしたいものです。

出典

2016-09-28 Johanness

をするのではなく、あなたの体の上に背景画像を入れてメイン左 –

...とどのように私はそれを分割するのでしょうか？ – Johanness

問題がhttps://jsfiddle.net/r1fnncnd/1/ ....のどこにあるのかわからない期待される出力のスクリーンショットは素晴らしいでしょう – DaniP

両方の列を与える：
は寸法にこれらpseudoelementsの背景画像を設定し、ビューポートと同じ次元の擬似要素の前に、あなたでしょう私の場合は、単一の要素（内：100VH自動;センターカバー - またはカバーも含む）
右の列をビューポートの半分だけ移動し、右を前の要素の前に同じ量だけ戻します。
列

コード：

\t 
 
html, 
 
body, 
 
main { 
 
    height: 100%; 
 
    overflow:hidden; 
 
} 
 

 
.main-left, 
 
.main-right { 
 
    height: 100vh; 
 
    width: 50vw; 
 
    position: absolute; 
 
    overflow: hidden; 
 
} 
 

 
.main-left { 
 
    left: 0; 
 
} 
 

 
.main-right { 
 
    left: 52vw; 
 
} 
 

 
.main-left:before { 
 
    content: ""; 
 
    z-index:-3; 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: url('https://unsplash.it/500/400'); 
 
    background-size: cover; 
 
} 
 

 
.main-right:before { 
 
    content: ""; 
 
    z-index:-3; 
 
    position: absolute; 
 
    left: -50vw; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: url('https://unsplash.it/500/400'); 
 
    background-size: cover; 
 
}

<body> 
 
    <div class="main-left"> 
 
    ...left content here ... 
 
    </div> 
 
    <div class="main-right"> 
 
    ...right content here ... 
 
    </div> 
 
</body>

出典

2016-09-28 19:33:12 Johanness

実際にあなたの所望の効果を達成する方法は一つだけを使用して、あります画像ではなく、画像が正方形である場合に限ります。

プロパティの4値構文background-positionを使用してください。を.main-left列の場合は-50vh、右側の場合は列の場合は-50vhとします。

html, 
 
body, 
 
main { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.main-left, 
 
.main-right { 
 
    height: 100vh; 
 
    width: 50vw; 
 
    position: absolute; 
 
    top: 0; 
 
    background: url('https://unsplash.it/750/750'); 
 
    background-size: auto 100%; 
 
    background-repeat: no-repeat; 
 
    box-sizing: border-box; 
 
} 
 
.main-left { 
 
    left: 0; 
 
    background-position: right -50vh top 0; 
 
} 
 
.main-right { 
 
    left: 51vw; 
 
    background-position: left -50vh top 0; 
 
}

<body> 
 
    <div class="main-left"> 
 
    ...left content here ... 
 
    </div> 
 
    <div class="main-right"> 
 
    ...right content here ... 
 
    </div> 
 
</body>

ここJSFiddleです。

詳細についてbackground-positionプロパティ。

出典

2016-09-28 17:35:14 5aledmaged

正方形のイメージが非常に低い確率を除いて、私が探していたものが5aledmagedありがとうございました。しかし、それは私の方法の一歩です;） – Johanness

スプリットとセンタービューポートの高バックグラウンド画像

答えて

関連する問題