CSS：重复的背景位置？

Question

I currently have an image repeating on y, but I want it to start 20 px down from where the div starts....

how do I do that?

Answer 1

Maybe you should use :after or :before for this, because there's no need to add extra markup in your HTML. Like this:

.container{
    height:400px;
    background:red;
    position:relative;
    width:400px;
}
.container:after{
    content:"";
    position:absolute;
    top:20px;
    left:0;
    right:0;
    bottom:0;
    background:url(http://lorempixel.com/400/200) repeat-y;
}

Check this http://jsfiddle.net/h6K9z/

It works in IE8 & above. For IE7 or IE6 you can give extra DIV for this.

Answer 2

I prefer the shorthand method:

.yourClass {
    background: url(../images/yourImage.png) repeat-y 0 20px;
}

Answer 3

I don't think simply combining background-position and background-repeat eg repeat-y 0 20px will work. Assuming this jsFiddle sample represents OP's case, the solution should make the green background starts at (vertical) 20px; the "Hello there!" text shouldn't sit on top of the green background.

My answer is this cannot be done plainly by CSS; meaning, you might want to change your HTML structure to accomplish your goal. However, I am starting a bounty hoping others to come up with better answers.

Answer 4

.yourClass{
    background: url(images/yourImage.png) repeat-y;
    background-position: 0px 20px;
}

http://www.w3schools.com/css/pr_background-position.asp

Answer 5

You just need the background-position property to be set:

background-position: 0px 20px;
background-repeat: repeat-y;