#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. Is it possible to do like this?
views:
44answers:
2
+2
A:
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.
Pekka
2010-10-19 15:38:22
@pekka - Right. I want to start image after 46px area from top so background of top 46px should be transparent
metal-gear-solid
2010-10-19 15:41:20
+1
A:
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;}
Moses
2010-10-19 15:39:29