CSS: Hintergrundposition mit Wiederholung?

Question

Ich habe zZ ein Bild, das auf y wiederholt, aber ich will, dass es 20 px unten beginnt, von wo das div beginnt ....

wie mache ich das?

Answer 1

Vielleicht sollten Sie hierfür :after oder :before verwenden, da Sie kein zusätzliches Markup in Ihrem HTML-Code hinzufügen müssen. Wie folgt aus:

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

prüfen diese http://jsfiddle.net/h6K9z/

Es in IE8 funktioniert & oben. Für IE7 oder IE6 können Sie dafür extra DIV angeben.

Answer 2

Sie müssen nur die background-position Eigenschaft festgelegt werden:

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

Ich ziehe das Kurzverfahren:

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

Answer 5

Ich glaube nicht einfach background-position Kombination und background-repeat z repeat-y 0 20px wird funktionieren. Unter der Annahme, dass jsFiddle sample den Fall von OP darstellt, sollte die Lösung den grünen Hintergrund bei (vertikal) 20px beginnen lassen; das "Hallo da!" Text sollte nicht auf dem grünen Hintergrund sitzen.

Meine Antwort ist dies kann nicht einfach durch CSS getan werden; Das bedeutet, dass Sie möglicherweise Ihre HTML-Struktur ändern möchten, um Ihr Ziel zu erreichen. Ich beginne jedoch mit einer Kopfgeldschance und hoffe, dass andere bessere Antworten finden.