0

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?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Cain Nuke
  • 2,843
  • 5
  • 42
  • 65

1 Answers1

0

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-boxof 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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thank you but the problem with that is that the content will also be pushed down and I dont want that. – Cain Nuke Jul 16 '16 at 09:49
  • Because you are adding padding to the container which will push the content down. I want to push down only the background, not the content. – Cain Nuke Jul 16 '16 at 09:54
  • After all, seems like the pseudo-element answer is the only option possible here. I think I will stick to that. Thank you. – Cain Nuke Jul 16 '16 at 10:06