屏幕两侧的 CSS 背景元素答案

【问题标题】：CSS background elements on both sides of the screen屏幕两侧的 CSS 背景元素
【发布时间】：2015-07-22 03:35:20
【问题描述】：

我想实现这一点：屏幕两侧有两个装饰元素（有点像波浪）。这是我到目前为止所得到的。如果可能有更优雅的解决方案（例如仅使用 CSS 的 body 元素进行样式设置），请告知。如果两个元素都不可见，则以下解决方案会很好。你可以在行动中检查这一点。

这是有效的FIDDLE。

你能帮忙吗？

<!doctype html>
<html class="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="styles/style.css" >
    <style type="text/css">
        .background_left {
            background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
            background-repeat:repeat-y;
            background-position:left;
            position:absolute;
            left:0;
        }

        .background_right {
            background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
            background-repeat:repeat-y;
            background-position:right;
            position:absolute;
            right:0;
        }
        .background_left, .background_right {
            height:100%;
        }

    </style>

</head>

<body>
    <div class="background_left">
        <img src="http://www.destadesign.com/destacms/images/background_border_left.png"> 
    </div> 
    <div class="background_right">
        <img src="http://www.destadesign.com/destacms/images/background_border_right.png">
    </div> 

    <div class="content" style="height:500px;"> <!-- content -->
    </div>
</body>
</html>

【问题讨论】：

标签： html css background

【解决方案1】：

就这样吧：

    body {
    	background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}

这个 CSS 向body 添加了两个背景图像，分别将它们定位在右侧或左侧，并设置了repeat-y，因此它不会填满屏幕。

JSFiddle Demo

【讨论】：

非常感谢。这个简单的示例适用于所有窗口高度，这是我想要的，但我在更复杂的页面上遇到了问题。也许你也可以给我一个提示，为什么在我的页面上它只延伸到内容而不是窗口高度的 100%？ destadesign.com/destacms/page.php?id=8（可以在页面底部看到）
@JanDesta body 只填充所需的空间，如果你想让它工作，你必须将 html 和 body 的高度设置为 100%：body, html{width:100%;height:100%;}