Question

编辑：我已经使用选定的答案来做到这一点：

body {
margin: 0;
height:100vh;
background: url(flamesbg.png) center repeat-y,
            url(bgleft.jpg) right calc(50vw + 350px) top/auto 100vh no-repeat fixed,
            url(bgright.jpg) left calc(50vw + 350px) top/auto 100vh no-repeat fixed; }

非常感谢！结束编辑

我正在努力建立一个看起来有点像这样的网站（见图）。我做了一些看似我想要的东西，但在调整大小时不正确，你可以在http://gnphoenix.com上看到

Template

我需要一个固定宽度为720px的中心div（那部分我没问题），两边都有不同的背景。

我尝试过只有一个居中的div并为身体添加背景，但我不知道如何将它固定到居中div的两侧。

我尝试使用带有display：table和3 div的包装器，左边和右边有一个bg，但如果内容太多，它们会一直到底部。

我愿意接受其他可以达到同样效果的设计建议。这是我的第一篇文章，对不起，如果我违反了帖子规则。提前谢谢！

编辑：方法1

html {
    min-height: 100%;
}
body {
    min-height: 100%;
    padding: 0px;
    margin: 0px;
    /* Now I need to add a bg to the left and a bg to the right but do not know how to make it fit to the sides of the center div
    background: url(bgleft.jpg) POSITION/SIZE no-repeat fixed, url(bgright.jpg) POSITION/SIZE no-repeat fixed;
    */
}
#content {
    width: 720px;
    height: 100%;
    text-align: justify;
    margin: 0px auto;
    background-color: #191919;
    color: #848484;
}

<!DOCTYPE html>
<html>
<head>
<!--Obviously I have more code here in the real page and a CSS link-->
</head>
<body>
<!--Method 2, having 1 centered div and trying to add the bg with the body element-->
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>

编辑：方法2

html {
    min-height: 100%;
    height: 100%;
}
body {
    min-height: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    display: table;
    width: 100%;
    height: 100%;
}
#left {
    display: table-cell;
    width: auto;
    /* Trying to add bg here but the left div scrolls with the center div so the bg enlarges when size is cover, need something for the bg or the div to stay the resolution size with no scrolling, I don't understand why it goes under the center div instead of going to the border of it... it appears when the fixed attribute is not there but disappears when its there, I'm doing something wrong */
    background: url(bgleft.jpg) top right/cover no-repeat fixed;
}
#right {
    display: table-cell;
    width: auto;
}
#center {
    display: table-cell;
    width: 720px;
    height: 100%;
    min-height: 100%;
    margin: 0px auto;
    background-color: #191919;
    color: #848484;
    text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
<!--Obviously I have more code here in the real page and a CSS link-->
</head>
<body>
<!--Method 1, having 3 div inside a wrapper with display:table-->
<div id="wrapper">
<div id="left"></div>
<div id="center">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br><br><br><br><br><br><br><br><br>
</div>
<div id="right"></div>
</div>    
</body>
</html>

Answer 1

元素可以有多个背景，因此只需使用2个背景。

body {
  margin:0;
  height:100vh;
  background:url(http://lorempixel.com/988/988) calc(50% - 642px) top  no-repeat fixed,
             url(http://lorempixel.com/g/988/988) calc(50% + 642px) top no-repeat fixed;
}
div {
  width:300px;
  min-height:calc(100vh - 2em);
  margin:0 auto;
  background:#EEE;
  padding:1em;
  }

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

Answer 2

在您向我们展示的示例中，他们只使用了一个图片，您可以在此链接中看到它：http://gnphoenix.com/images/backgroundhtml.jpg

在浏览器中使用您的开发人员工具，然后就可以看到它了。

他们将背景图片添加到html元素。

background: url(url-to-image.png) no-repeat center fixed;
background-size: cover;
padding: 0px;
margin: 0px;
min-height: 100%;
background-size: cover;

HTML / CSS，居中的div，每边都有多个背景

2 个答案: