CSS: położenie tła z powtórzeniem?

Question

Obecnie mam obraz powtarzający się na y, ale chcę, aby wystartował 20 pikseli w dół od miejsca, w którym rozpoczyna się div ...

jak to zrobić?

Answer 1

Może powinieneś użyć do tego celu :after lub :before, ponieważ nie ma potrzeby dodawania dodatkowego znacznika w kodzie HTML. Tak:

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

Sprawdź to http://jsfiddle.net/h6K9z/

Działa w IE8 & powyżej. W przypadku IE7 lub IE6 można podać dodatkowe DIV.

Answer 2

Wystarczy właściwość background-position być ustawione:

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

Answer 3

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

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

Answer 4

Wolę skrótowej metody:

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

Answer 5

nie sądzę po prostu łącząc background-position i background-repeat np repeat-y 0 20px zadziała. Zakładając, że to jsFiddle sample reprezentuje przypadek OP, rozwiązanie powinno sprawić, że zielone tło zacznie się od (pionu) 20 pikseli; "Cześć tam!" tekst nie powinien siedzieć na zielonym tle.

Moja odpowiedź brzmi: nie można tego zrobić w prosty sposób za pomocą CSS; co oznacza, że ​​możesz chcieć zmienić strukturę HTML, aby osiągnąć swój cel. Jednak zaczynam nagrodę, mając nadzieję, że inni wymyślą lepsze odpowiedzi.