CSS: posizione di sfondo con ripetizione?

Question

Attualmente ho un'immagine che si ripete su y, ma voglio che inizi a 20 px in basso da dove inizia il div ....

come faccio?

Answer 1

Forse dovresti usare :after o :before per questo, perché non è necessario aggiungere ulteriore markup nel tuo codice HTML. Come questo:

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

Scegli questa http://jsfiddle.net/h6K9z/

Funziona in precedenza IE8 &. Per IE7 o IE6 è possibile aggiungere DIV extra per questo.

Answer 2

Hai solo bisogno la proprietà background-position da impostare:

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

preferisco il metodo shorthand:

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

Answer 5

Non credo semplicemente combinando background-position e background-repeat es repeat-y 0 20px funzionerà. Supponendo che questo jsFiddle sample rappresenti il ​​caso dell'OP, la soluzione dovrebbe rendere lo sfondo verde a partire da 20px (verticale); il "Ciao!" il testo non deve stare in cima allo sfondo verde.

La mia risposta è che questo non può essere fatto chiaramente dai CSS; nel senso, potresti voler cambiare la tua struttura HTML per raggiungere il tuo obiettivo. Tuttavia, sto iniziando un premio che spera che gli altri escano con risposte migliori.