Question

我想在我的身体背景上有一个重复-x的网站，但背景是1024宽，所以在更宽的显示器上，图像重新开始的线将位于身体的右侧，并且可能是可见的我的内容是以身体为中心的宽800宽。我希望从重复背景中的“分裂”发生在身体的中心，它被内容隐藏。

我确信这是可能的，有些诡计，其细节超出了我的新手设计和布局技巧。

替代方法：我使用Liquid Rescale GIMP插件（使用seam carving）将图片拉伸到原始大小的两倍。它效果很好，我现在很高兴，但这不是这个问题的答案。

Answer 1

在没有任何CSS技巧或额外标记的情况下执行此操作的简单方法是修改图像。将背景图像居中：

background-position: top center;

...然后在编辑器中偏移实际的图像文件。在Photoshop中使用Filter＆gt;＆gt;其他＆gt;＆gt;偏移并使用水平值，该值是图像宽度的一半。同样，在Gimp中使用Layer >> Transform >> Offset。

这不是您正在寻找的干净的CSS解决方案，但这是一个很好的实用修复。

Answer 2

只是放入风格：

background-position: 400px 0px;

这将从左侧开始重复400px（从而在内容下移动分割）

Answer 3

我认为不使用CSS表达式动态执行此操作（不考虑屏幕大小）是不可能的。我不知道有关浏览器支持的详细信息。快速谷歌搜索将此页面作为如何执行此操作的示例。

Answer 4

除了大卫所说的，创建一个无缝的平铺背景图像并不是那么难：

这需要一些时间，但一旦完成，它将在所有屏幕分辨率上看起来都很好。