Wie positioniert man vertikal einen wiederholten Bildhintergrund?

Question

Ich habe diesen Code:

background:url("someimage.gif") repeat-y 50px right; 

das Problem hier ist, dass ich den Hintergrund muß 50px von oben beginnen, damit es ein 50px Raum zwischen dem Bild und der Spitze aber das wird nicht passieren. Ich weiß sehr gut, dass das Bild richtig positioniert ist, wenn es nicht wiederholt wird, aber ich brauche es vertikal zu wiederholen. Gibt es einen Weg? Wie erreiche ich den Abstand zwischen Anfang und Anfang des wiederholten Bildes?

Answer 1

Es gibt eine Möglichkeit, es zu fälschen, wenn es nichts in diesem oberen Raum gibt.

Wenden Sie 50px (oder Ihren gewählten Wert) von padding-top auf die div.

Die Anwendung den Hintergrund wie gewohnt (repeat-y) aber Clip der Hintergrund der content-box des div.

Background-clip @ MDN

div { 
 
    background: url(http://placekitten.com/50/50) repeat-y; 
 
    padding-top: 50px; 
 
    height: 50vh; 
 
    background-clip: content-box; 
 
    width:50vw; 
 
    margin:2em auto; 
 
    border:1px solid red; 
 
}

<div></div>

OR

Verwenden einer Position, pseudo-Element geeigneter Größe/positioniert

div { 
 
    height: 50vh; 
 
    width: 50vw; 
 
    margin: 2em auto; 
 
    border: 1px solid red; 
 
    position: relative; 
 
} 
 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: calc(100% - 50px); 
 
    background: url(http://placekitten.com/50/50) repeat-y; 
 
    top: 50px; 
 
    left: 0; 
 
}

<div></div>