如何垂直放置重复Y图像背景？

Question

I have this code:

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

the problem here is that I need the background to start 50px from top so there is a 50px space between the image and the top but that wont happen. I know very well that the image would position right if not repeated but I need it to be repeated vertically. Is there any way around? How can I achieve that space between top and the start of the repeated image?

Answer 1

There a way to fake it if there is nothing in that top space.

Apply 50px (or your chosen value) of padding-top to the div.

The apply the background as usual ( repeat-y ) but clip the background to the content-box of the 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

Use a position pseudo-element suitably sized/positioned

 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>