cssrepeating-linear-gradient

repeating-linear-gradient broken on the last repetition

I'm trying to create element with stripped background using repeating-linear-gradient but start it 30px above the container. I'm using the background-position property, but the last repetition of the gradient is always broken:

enter image description here

Sample code:

.wrapper {
    --color-a: #eaecef;
    --color-b: white;
    --gradient-height: 60px;

    background: repeating-linear-gradient(180deg,
        var(--color-a),
        var(--color-a)      calc(var(--gradient-height) - 1px),
        var(--color-b)      var(--gradient-height),
        var(--color-b)      calc(var(--gradient-height) * 2 - 1px)
    );
    background-position-y: -30px;
}

and fiddle with the working (means broken :D) example: https://jsfiddle.net/b3mhe2c5/5/

[edit] Setting background-repeat: none helped in this example, but with different number of children it's broken again: https://jsfiddle.net/phsjunLw/

Solution

  • Try increasing y background size as much as the position shifted.

    .wrapper {
  --color-a: #eaecef;
  --color-b: white;
  --gradient-height: 60px;
    background: repeating-linear-gradient(180deg,
        var(--color-a),
        var(--color-a)      calc(var(--gradient-height)),
        var(--color-b)      var(--gradient-height),
        var(--color-b)      calc(var(--gradient-height) * 2)
    );
  background-position-y: -30px;
  background-size: 100% calc(100% + 30px);
}

.element {
  height: 10px;
  padding: 10px;
  line-height: 10px;
}
    <div class="wrapper">
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
</div>