CSS背景从300像素重复起

我想知道如果任何人知道如何实现以下 - 看看http://www.dspts.si CSS背景从300像素重复起

屏幕的前1/3有一个空的背景，并从那里开始应该有一个图案重复。我现在通过创建一个很长的模式png并将其设置为抵消300和repeat-x。然而，我对这个解决方案并不满意，因为如果页面比png背景图片长，它会中断。

感谢您的任何建议！

把重复的图案作为背景，以html元素，那么白色1px的* 300像素的图像作为背景图像body元素，你所有的设置。

html, body { 
    height: 100%; 
} 

html { 
    background: url(dotted.png); 
} 

body { 
    background: url(white_1x300.png) 0 0 repeat-x; 
}

您不必使用html和body标签对于这一点，但它是最简单的方法，并且不需要任何新的标记。

2009-12-04 10:08:49

只有1张图片是不可能的？ – xtofl 2009-12-04 10:54:38

不，因为你不能用元素来伪造白色的300px高的区域，而且你不能将图片合并为html背景需要重复。 – 2009-12-04 11:45:34

谢谢你这个作为魅力工作！ – 2009-12-05 20:32:29

是，指定背景图像正常，但设置background-position这样的：

background-position:0 300px;

这将使在0像素的背景图像开始从左边，并从顶部300像素。

我们不要忘记，您可以使用FireBug和FireFox轻松诊断网站上的技术。

2009-12-04 08:57:40

你能继续使用repeat -y吗？ – xtofl 2009-12-04 08:59:00

啊公平点：D，没有发现那个http://www.dspts.si/用了一个很长的很薄的图片重复。我的不好 – 2009-12-04 09:01:17

是的，好吧，这是我现在所做的与立场。如果我做了重复 - 它会出于某种原因环绕，我也会在顶部有模式。 :( – 2009-12-04 09:05:50

您可以指定多个背景。请参阅Can I have multiple background images using CSS?。该技术提到的有：

2009-12-04 10:05:48

回答