CODEWITHSUNDEEP
htmlcss
SReject
SReject

Reputation: 3936

Stop background from repeating after a specific point

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

Upvotes: 1

Views: 164

Answers (2)

Noobs DeSroobs
Noobs DeSroobs

Reputation: 283

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;
}

Upvotes: 0

chiliNUT
chiliNUT

Reputation: 19573

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.

Upvotes: 2

Related Questions