How to start background repeat-y after 46px space?

2019-08-11 10:46发布

#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?

标签: css xhtml
2条回答
疯言疯语
2楼-- · 2019-08-11 11:04

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;}
查看更多
啃猪蹄的小仙女
3楼-- · 2019-08-11 11:20

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.

查看更多
登录 后发表回答