2009-08-18 24 views
2

我想为我的网站在我的身体背景上设置repeat-x,但背景宽度为1024,因此在更宽的显示屏上,图像重新开始的行将定位在身体的右侧,并可能可见。我的内容以身体宽800为中心。我希望像重复背景那样的“分裂”发生在身体的中心,它被内容隐藏。如何定位由背景重复造成的分割线

我相信这是可能的,有一些欺骗,其细节超出了我的新手设计和布局技能。

解决方法:我使用Liquid Rescale GIMP插件(使用seam carving)将图像拉伸至其原始大小的两倍。它效果很好,现在我很开心,但这不是对这个问题的回答。

回答

2

只是把风格:

background-position: 400px 0px; 

这会从左侧开始重复400像素(因此移动内容下的拆分)

2

我想是不是可以动态地做到这一点(不考虑屏幕大小),而不使用CSS表达式。我不知道浏览器支持的细节。一个快速的谷歌搜索把这个页面作为如何做到这一点的一个例子。

http://valums.com/vertical/

3

直截了当地做到这一点没有任何CSS技巧或额外的标记是来修改图像。将背景图像居中:

background-position: top center; 

...然后在编辑器中偏移实际图像文件。在Photoshop中使用“滤镜>>其他>>偏移”,并使用图像宽度一半的水平值。同样,在Gimp中使用Layer >> Transform >> Offset

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

1

添加到什么大卫说,创建一个无缝,平铺背景图像不是强硬:

Seamless background with Photoshop

这需要一些时间,但它会很好看的,一旦你所有的屏幕分辨率'重做。