固定顶部图像+垂直重复其余部分

我正在设计一个网页，其中有纸张图像作为内容区域的背景。身体将拥有自己的背景图像。文件需要从页面的顶部开始，并且一直重复到底部，无论长度如何。固定顶部图像+垂直重复其余部分

这里的问题：

我需要有纸的顶部在div的顶部，然后它下面的垂直重复上下页纸张的重复部分，在一个巨大的创造的幻觉正常顶部的一张纸。我需要在一个div中（理想情况下）发生这种情况，因为我无法分割内容。我一直在梳理网页，特别是CSS3网站。我知道每个div可以有多个背景图片等，但我不认为您可以指定第二个重复图片开始的像素位置。我已经在Photoshop中创建了无缝，垂直重复的图像。

顺便说一句，如果有必要，我愿意在公交车下面放8个及以下的公共汽车。

如果我现在还没有给你一个“视觉”，想象一下。您从笔记本中撕下一张纸，纸的顶部位于页面的顶部，但您从未看到底部。随着页面变长，您只会看到越来越多的页面中心。

谢谢。

下面是一些伪代码：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { 
    background: url(body-background.gif) repeat scroll left top; 
} 

.paper { 
    margin: auto; 
    width: 1170px; 
    background: url(paper-top.png) left top no-repeat, url(paper-bottom.png) left 100px repeat-y; 
} 
</style> 
</head> 
<body> 
<div class="paper"> 
    <!--content here--> 
</div> 
</body> 
</html>

在“纸”类的背景，我想写什么（可能需要滚动才能看到）。例如：从页面开始处开始100px并垂直重复。

编辑

明白了彼得的帮助工作。我不知道是否会导致在内容div中定位问题并回来困扰我。但现在它仍然有效。谢谢，彼得。

JSFiddle

如果所有的地狱破看起来，我不得不去与两个div和分裂的标志，或给它一些定位...

来源

2012-12-10 keyboardSmasher

你能提供一些（简化的）代码吗？也许甚至是一个jsfiddle？ – Pevara

@PeterVR我加了一些假冒代码。 – keyboardSmasher

为什么不能有两个'div'元素？一个用于纸张的“顶部”，另一个用于重复的纸张背景？然后，你不必担心任何具体的CSS3愚蠢，或JavaScript的欺骗，或任何。 –

如果你坚持不拆分了内容，我会做这样的事情：http://jsfiddle.net/ntWTE/

我没有使用css3多后台选项，因为我习惯于制作跨浏览器网站，并且支持仍然倾倒。我只是添加了两个div来包含不同的背景图像，并将它们定位在内容之后。也许不是最漂亮的解决方案，但它应该适用于所有浏览器。

.paper { 
    margin: auto; 
    width: 450px; 
    position: relative; 
} 
.paper-bg { 
    background: #cff; /* the repeating image for the paper */ 
    position: absolute; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 1; 
} 
.paper-bg-top { 
    position: absolute; 
    background: #ccf; /* the top image for the paper */ 
    top: 0; 
    left: 0; 
    height: 100px; 
    width: 100%;  
} 
.paper-content { 
    position: relative; 
    z-index: 5;  
}

来源

2012-12-10 00:49:52 Pevara

这看起来像可以工作。我现在正在我的ipad上睡觉，但明天如果它能正常工作，我会给你打勾的。感谢您的时间，彼得......和其他人一样:) – keyboardSmasher

谢谢。 :) [jsfiddle]（http://jsfiddle.net/qbzzc/） – keyboardSmasher

固定顶部图像+垂直重复其余部分

回答

相关问题