Css 将多个背景与页面底部对齐？_Css

Css 将多个背景与页面底部对齐？

css

Css 将多个背景与页面底部对齐？,css,Css,我正在创建一个由印刷设计师设计的网站。背景包括两幅图像：沿y轴重复并与页面底部对齐的渐变一幅与页面底部对齐并居中的图像。（圆圈）演示：圆圈部分相当大，上面有大部分页面内容。（~900px~750px）如果页面太小，我需要添加卷轴。如果页面太大。我需要第一个图像（垂直）和背景色（水平）来填充我的区域。我想使用多种背景，但该网站需要IE8支持切割一条1px的渐变条，并在身体上水平重复。将附件设置为“固定” 剪下圆圈并将其作为内容容器的背景图像。这很可能是一个具有透明度的png，以允许上

我正在创建一个由印刷设计师设计的网站。背景包括两幅图像：

沿y轴重复并与页面底部对齐的渐变一幅与页面底部对齐并居中的图像。（圆圈）

演示：

圆圈部分相当大，上面有大部分页面内容。（~900px~750px）

如果页面太小，我需要添加卷轴。如果页面太大。我需要第一个图像（垂直）和背景色（水平）来填充我的区域。我想使用多种背景，但该网站需要IE8支持

切割一条1px的渐变条，并在身体上水平重复。将附件设置为“固定”

剪下圆圈并将其作为内容容器的背景图像。这很可能是一个具有透明度的png，以允许上一个渐变显示出来

CSS

HTML


满足于此

或者，您可以使用CSS3放置渐变并完全避免图像。一些较旧的浏览器不支持它，但它比使用静态渐变图像灵活一些

查看这个方便的生成器-只需选择颜色和样式，它将为您提供代码：

不要忘记将其与底部对齐：

background:url（'bg.jpg'）中间底部重复-x固定body {
   background: url('bg.jpg') center bottom repeat-x fixed;
}

.container {
   background: url('circle.png') no-repeat center bottom;
   margin: 0 auto;
   min-height: 750px;
   width: 900px;
}


<body>
 <div class="container">
    content here
 </div>
</body>