#data-wrapper {
background:url("../images/repeat-bg.png") repeat-y 0 46px transparent;}
I want to start repeat-bg.png
as a repeat-y
but after 46px
area from top of #data-wrapper
. 开发者_StackOverflow社区Is it possible to do like this?
You mean so that the top 46 Pixels have no background image?
No, that's not possible, sorry. You'll have to work around it, e.g. using another div
with a margin.
You need to apply the background image to a containing div with 46px margin.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
#container {
background:url("../images/repeat-bg.png") repeat-y; margin-top:46px; height:600px;}
/* height:600px is only critical to the demo code and can be removed once the page has content */
</style>
</head>
<body>
<div id="container">
<!--All of your content goes here-->
</div>
</body>
</html>
In addition to this method, if support for this is not critical, you could be forward thinking and adopt the currently very under-supported CSS3 multiple-background declaration.
body {background:url("bg1.png") top no-repeat, url("bg2.png") bottom repeat-y;}
精彩评论