Question

I currently have an image repeating on y (e.g. background: url() repeat-y), but I want it to start 20px down from where the div starts.

how do I do that?

Answer 1

Maybe you should use :after or :before for this, because there’s no need to add extra markup in your HTML. Like this:

.container {
  height: 400px;
  background: red;
  position: relative;
  width: 400px;
}
.container:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/400/200) repeat-y;
}
h1 {
  position: relative;
  color: green;
  font-size: 30px;
  z-index: 1;
}

<div class="container">
  <h1>Hello world</h1>
</div>

It works in IE8 & above. For IE7 or IE6 you can give extra DIV for this.