Stop background from repeating after a specific point - html

Question

Is there a way to stop a background image from repeating after a specific(though dynamic) point?
Currently I have the following html
<ul>
<li>variable</li>
<li>amount</li>
<li>of</li>
<li>items</li>
</ul>
and css:
ul {
background-image: url('./imgs/gridlines.png');
background-repeat: y-repeat;
}
Now, the above repeats the image for the entire length of the ul element. My issue is I need the repeating to stop 8px from the bottom of the ul.
I've tried using background-position but this just shifts the background, while still repeating it to the end of the ul element.
I've also tried using background-size: 1 calc(100% - 8px); but this fails for chrome.
fiddle

Answer 1

You can do this in CSS...sort of. You cannot tell background-repeat to repeat a specified number of times; it doesn't work that way. So my idea is to stick an 8px white block at the bottom of the list, which should accomplish something very close to the desired effect:
ul {
background-image: url('http://i.imgur.com/B5k8FTP.png');
background-repeat: y-repeat;
padding-left:0;
color:black;
width:200px;
position:relative;
}
li:last-child{
position:relative;
z-index:10;
}
ul::after{
display:block;
background-color:white;
position:absolute;
bottom:0px;
height:8px;
width:100%;
content:"";
z-index:1;
}
<ul>
<li>variable</li>
<li>amount</li>
<li>of</li>
<li>items</li>
</ul>
The ul style sets a width for the sake of the demo. padding-left:0 removes the margin from the left side of the <ul>, also optional. The position is set to be relative, because after content will be positioned absolutely, relative to the <ul>/
The ul::after style inserts the white block after the list. position:absolute and bottom:0px place it at the bottom of the list, relative to the <ul>. The z-index is set to ensure it sits behind the bottom <li>
The li:last-child makes sure that it sits on top of the ul::after content.

Answer 2

You can wrap the content you want inside a frame that is set to inherit the size from parent - the 8 px you want.
If I am misunderstanding something a jsfiddle would be nice.
EDIT:
Like this?
.wrapper{
position: relative;
left: 20px;
height: 46px;
background-image: url('http://i.imgur.com/qIaw9Lc.png');
background-repeat: repeat-y;
}