Html 拆分和居中视口高背景图像

我有一个带有背景图像和两列内容的布局。 列为视口高度的100%和视口宽度的50%（将屏幕分成两个垂直的半部分）。背景图像也是视口高

当我将右栏进一步向右移动时，背景图像的这一部分随之移动，在两半之间留下一个间隙

到目前为止一切正常，但我希望背景图像集中在页面上

代码：

html，
身体，
主要{
身高：100%；
溢出：隐藏；
}
.主左，
.主要权利{
高度：100vh；
宽度：50vw；
位置：绝对位置；
排名：0；
背景：url（'https://unsplash.it/150/150');
背景尺寸：自动100%；
背景重复：无重复；
框大小：边框框；
}
主左{
左：0；
背景位置：左0；
}
.主要权利{
左：50vw；
背景位置：-50vw 0；
}

…在这里留下了内容。。。
…正确的内容在这里。。。

事实上，有一种方法可以达到你想要的效果，只使用一幅图像，但前提是图像是正方形

只需使用

backgroundposition

属性的四值语法；将

背景位置设置为
.main left
列右侧的
-50vh
，将
.main right
列左侧的
-50vh


html，
身体，
主要{
身高：100%；
溢出：隐藏；
}
.主左，
.主要权利{
高度：100vh；
宽度：50vw；
位置：绝对位置；
排名：0；
背景：url（'https://unsplash.it/750/750');
背景尺寸：自动100%；
背景重复：无重复；
框大小：边框框；
}
主左{
左：0；
背景位置：右-50vh顶部0；
}
.主要权利{
左：51vw；
背景位置：左-50vh顶部0；
}

…在这里留下了内容。。。
…正确的内容在这里。。。
事实上，有一种方法可以达到你想要的效果，只使用一幅图像，但前提是图像是正方形

只需使用
backgroundposition
属性的四值语法；将
背景位置设置为
.main left
列右侧的
-50vh
，将
.main right
列左侧的
-50vh


html，
身体，
主要{
身高：100%；
溢出：隐藏；
}
.主左，
.主要权利{
高度：100vh；
宽度：50vw；
位置：绝对位置；
排名：0；
背景：url（'https://unsplash.it/750/750');
背景尺寸：自动100%；
背景重复：无重复；
框大小：边框框；
}
主左{
左：0；
背景位置：右-50vh顶部0；
}
.主要权利{
左：51vw；
背景位置：左-50vh顶部0；
}

…在这里留下了内容。。。
…正确的内容在这里。。。

为两列指定一个：before伪元素，其尺寸与视口相同
将这些伪元素的背景图像设置为单个元素中的尺寸（在我的示例中：100vh auto；居中顶部-但覆盖或包含也可以）
将右列移动视口的一半，并将右：before元素向后移动相同的量
隐藏列的溢出

代码：

html，
身体，
主要{
身高：100%；
溢出：隐藏；
}
.主左，
.主要权利{
高度：100vh；
宽度：50vw；
位置：绝对位置；
溢出：隐藏；
}
主左{
左：0；
}
.主要权利{
左：52vw；
}
主左：在{
内容：“；
z指数：-3；
位置：绝对位置；
宽度：100vw；
高度：100vh；
背景：url（'https://unsplash.it/500/400');
背景尺寸：封面；
}
.右主干：在{
内容：“；
z指数：-3；
位置：绝对位置；
左：-50vw；
宽度：100vw；
高度：100vh；
背景：url（'https://unsplash.it/500/400');
背景尺寸：封面；
}

…在这里留下了内容。。。
…正确的内容在这里。。。

为两列指定一个：before伪元素，其尺寸与视口相同
将这些伪元素的背景图像设置为单个元素中的尺寸（在我的示例中：100vh auto；居中顶部-但覆盖或包含也可以）
将右列移动视口的一半，并将右：before元素向后移动相同的量
隐藏列的溢出

代码：

html，
身体，
主要{
身高：100%；
溢出：隐藏；
}
.主左，
.主要权利{
高度：100vh；
宽度：50vw；
位置：绝对位置；
溢出：隐藏；
}
主左{
左：0；
}
.主要权利{
左：52vw；
}
主左：在{
内容：“；
z指数：-3；
位置：绝对位置；
宽度：100vw；
高度：100vh；
背景：url（'https://unsplash.it/500/400');
背景尺寸：封面；
}
.右主干：在{
内容：“；
z指数：-3；
位置：绝对位置；
左：-50vw；
宽度：100vw；
高度：100vh；
背景：url（'https://unsplash.it/500/400');
背景尺寸：封面；
}

…在这里留下了内容。。。
…正确的内容在这里。。。
将背景图像放在你的身体上，而不是左上角……那么我该如何分割它呢？真的不知道问题出在哪里。。。。将显示预期输出的屏幕截图great@DaniP：为澄清添加了图片，如此？把背景图像放在你的身体上，而不是左上角…那么我该如何分割它呢？真的不明白问题在哪里。。。。将显示预期输出的屏幕截图great@DaniP：为澄清添加了图片，如此？谢谢你，阿莱德迈德，这就是我一直在寻找的——除了有一个正方形图像的概率非常低。但这是我前进的一步；）谢谢你，阿莱德迈德，这就是我一直在寻找的——除了有一个正方形图像的概率非常低。但这是我前进的一步；）