Html 在css中使用背景图像，并在页面中心使用白色背景

我使用此代码在

标记中使用图像作为背景

body {
   margin: 0; auto;
   font-family: Arial, Helvetica, sans-serif;
   background-image: url('image-blur.png');
   background-repeat: no-repeat;
   display: table-cell;
   vertical-align: middle;
   opacity:1;
}

---

但是图像覆盖了页面的白色背景。我希望图像只覆盖在html页面的左侧和右侧。在页面的中心存在数据。我需要在数据区域保持白色背景，但同时将图像用作固定背景。我怎样才能做到这一点？感谢您的帮助。

以下是该布局的一个可能实现： 注：所有颜色、尺寸和图像仅供演示之用。根据你的需要调整它们

东西
身体{
保证金：0；
}
梅因先生{
高度：100vh；
宽度：100vw；
背景：红色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
z指数：2；
位置：相对位置；
}
.形象{
背景图像：url（'https://placekitten.com/200/200?image=1');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
高度：500px；
宽度：1500px；
位置：绝对位置；
z指数：-1；
}
.内容{
背景：#fff；
高度：500px；
宽度：800px；
}

以下是该布局的可能实现： 注：所有颜色、尺寸和图像仅供演示之用。根据你的需要调整它们

东西
身体{
保证金：0；
}
梅因先生{
高度：100vh；
宽度：100vw；
背景：红色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
z指数：2；
位置：相对位置；
}
.形象{
背景图像：url（'https://placekitten.com/200/200?image=1');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
高度：500px；
宽度：1500px；
位置：绝对位置；
z指数：-1；
}
.内容{
背景：#fff；
高度：500px；
宽度：800px；
}

您只需使用多个背景：

正文{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
背景：
线性渐变（向右，透明20%，白色20%，白色80%，透明0）
，url（'https://lorempixel.com/1000/1000/');
最小高度：100vh；
}

您只需使用多个背景：

正文{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
背景：
线性渐变（向右，透明20%，白色20%，白色80%，透明0）
，url（'https://lorempixel.com/1000/1000/');
最小高度：100vh；
}

像这样的吗？是的，完全像这样好吧，我会这样回答。像这样的吗？是的，和这个一模一样好吧，我会把它作为答案。它给我显示了一个左边的图像，但另一个仍然是左向的，我希望是右向的。特别是数据所在的白色区域应该更大。不能使它变大，因为从一个侧面来说，图像是面向页面中间的数据的！史蒂芬诺森：我不明白你的意思：）你能详细说明一下吗？这是一个可以调整的非常简单的示例；）它向我显示了一个左边的图像，但另一个仍然是左向的，我希望是右向的。特别是存在数据的白色区域应该更大。不能使它变大，因为从一个侧面来说，图像是面向页面中间的数据的！史蒂芬诺森：我不明白你的意思：）你能详细说明一下吗？这是一个可以调整的非常简单的示例；）

<div class="main">
  <div class="image"></div>
  <div class="content">Stuff</div>
</div>

body {
  margin: 0;
}

.main {
  height: 100vh;
  width: 100vw;
  background: red;
  display: flex;
  justify-content: center;
  align-items:center;
  z-index: 2;
  position: relative;
}

.image {
  background-image: url('https://placekitten.com/200/200?image=1');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  width: 1500px;
  position: absolute;
  z-index: -1;
}

.content {
  background: #fff;
  height: 500px;
  width: 800px;
}