Q:

background image not repeating on absolute element

The background image (the topography) is not repeating. It stops above the 
 "Terra management technique" (look at pic). I want to cover the entire element (accordion), which is the element right above the footer.

HTML
<div class="accordion">
  <span class"topography"><img src="/img/bg/topo.svg"/></span>
  .....
</div>

CSS
.accordion {
  position: relative;
}

.topography {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
background-repeat: repeat;
}

.topography img{
height: 100%;
background-repeat: repeat;
}

A:

You should use the image as a background-image then, not as an img tag:
<div class="accordion">
  <span class"topography"></span>
  .....
</div>

CSS

.accordion {
  position: relative;
}

.topography {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
background-image: url("/img/bg/topo.svg");
background-repeat: repeat;
}

