CSS: background position with repeat?

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 don't think simply combining background-position and background-repeat e.g. 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.