CSS: фоновая позиция с повторением?

Ответ 1

Может быть, вы должны использовать :after или :before для этого, потому что нет необходимости добавлять дополнительную разметку в свой HTML. Вот так:

.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;
}

Отметьте http://jsfiddle.net/h6K9z/

Он работает в IE8 и выше. Для IE7 или IE6 вы можете предоставить дополнительные DIV для этого.

Ответ 2

Я предпочитаю сокращенный метод:

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

Ответ 3

Я не думаю, что просто объединяю background-position и background-repeat, например. repeat-y 0 20px будет работать. Предполагая, что этот пример jsFiddle представляет собой случай OP, решение должно заставить зеленый фон начинаться с (по вертикали) 20px; "Привет!" текст не должен сидеть поверх зеленого фона.

Мой ответ: это невозможно сделать с помощью CSS; Это означает, что вы можете изменить свою структуру HTML для достижения своей цели. Тем не менее, я начинаю щедрость, надеясь, что другие придут с лучшими ответами.

Ответ 4

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

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

Ответ 5

Вам нужно только свойство background-position:

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