顶部填充重复的css背景

如何添加顶部填充/空间的重复css背景。顶部填充重复的css背景

这是我的HTML结构。

<div class="flare"> 
    <div class="clouds"> 
    <div class="clouds_bottom"> 

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

     <div class="content_body_wrapper"> 
      contents 
     </div> 

     <div class="footer"> 
      contents 
     </div> 

    </div> 
    </div> 
</div>

和我的css代码不起作用。

.clouds_bottom { 
    background: url('../img/clouds_bottom_bg.png') repeat left 250px; 
}

来源

2012-04-19 Prakash

顶部空间一次或每行？ – 2012-04-19 20:50:47

我只需要250px的空间而没有任何背景，但我并不是指身体上的顶部填充。 – Prakash 2012-04-19 20:52:38

这是依赖于你的网站结构你能发布正在使用的类的html吗？ – 2012-04-19 20:54:49

使用CSS可以欺骗。而不是将背景100％从顶部覆盖它与另一个具有原始背景[颜色]的div。

HTML：

<html> 
<body> 
    <div id="cheated_background"> 
    </div> 
    <div id="body"> 
     content 
    </div> 
</body> 
<html>

CSS：

body { 
    background: lightblue; /* your clouds :) */ 
} 
#cheated_background { 
    position: absolute; 
    top: 0px; 
    background: white; 
    width: 100%; 
    height: 100px; 
} 
#body { 
    position: relative; 
}

退房live example。

来源

2012-04-19 22:19:06 seler

尝试使用repeat-x代替repeat？如果垂直重复，则无法看到由背景位置创建的边距。

编辑来评论：如果你需要在两个方向重复，我能想到的是一个三层结构。你需要一个容器分区position:relative，你可以把三个div分配给position:absolute。底部会有重复的背景图片，中间的会是白色的，只覆盖底部的顶部，顶部会包含您的实际内容。

来源

2012-04-19 21:05:55 Armatus

问题是我需要在x和y两个位置上重复背景。 – Prakash 2012-04-19 21:08:52

顶部填充重复的css背景

回答

相关问题