顶部填充重复的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;
}
答
使用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。
答
尝试使用repeat-x
代替repeat
?如果垂直重复,则无法看到由背景位置创建的边距。
编辑来评论:如果你需要在两个方向重复,我能想到的是一个三层结构。你需要一个容器分区position:relative
,你可以把三个div分配给position:absolute
。底部会有重复的背景图片,中间的会是白色的,只覆盖底部的顶部,顶部会包含您的实际内容。
+0
问题是我需要在x和y两个位置上重复背景。 – Prakash 2012-04-19 21:08:52
顶部空间一次或每行? – 2012-04-19 20:50:47
我只需要250px的空间而没有任何背景,但我并不是指身体上的顶部填充。 – Prakash 2012-04-19 20:52:38
这是依赖于你的网站结构你能发布正在使用的类的html吗? – 2012-04-19 20:54:49