用户缩小时重复图像边缘

Question

我有一个图像，我想成为我的wordpress网站的全屏幕宽度。我也希望这样做，当用户缩小时，它会占用该图像的边缘（例如，假设图像宽度为800，则左侧需要0-100像素，也可能是700-800 px for right）并重复这些，并做出回应。我认为严格的代码是不可能的，所以如果我想要重复拍摄边缘的照片，我将如何覆盖这三个图像并让它们相应地表现。这可能吗？图片基本上是天空的，它的大部分都是清晰的，可能是一片云，所以看起来很好看：）

我没有尝试使用代码，我对css有点新意，所以我会喜欢一些关于如何做的建议！现在我只有一个带有背景网址的div类，宽度为100％但是当我缩小时它会重复。

这是我正在谈论的图像：

Answer 1

经过一番摆弄后，我提出了以下使用:before和:after CSS伪元素的解决方案，这使得我的解决方案可以在不添加任何其他元素的情况下工作。此示例使用原始宽度为800px且高度为300px的图像。因此，中间部分为600px，侧面图像为100px宽。在以下CSS中更改这些数字以适合您的图像大小。 See a working jsFiddle demo with a poorly drawn cloud.

<div class="header"></div>

.header {
    position: relative;
    width: 100%;
    height: 300px;
    background-image: url('http://example.com/path/to/center-image.png');
    background-position: center;
    background-repeat: no-repeat;
}
.header:before,
.header:after {
    content:"";
    display: block;
    position: absolute;
    top: 0px;
    height: 300px;
    width: calc((100% - 600px) / 2);
}
.header:before {
    left: calc((100% - 600px) / 2 - (100% - 600px) / 2);
    background-image: url('http://example.com/path/to/left-image.png');
}
.header:after {
    right: calc((100% - 600px) / 2 - (100% - 600px) / 2);
    background-image: url('http://example.com/path/to/right-image.png');
}