repeating-linear-gradient broken on the last repetition

Question

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:

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/

doğukan · Accepted Answer · 2021-01-18T14:57:18.733

1

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>

edited Jan 18 '21 at 14:57

answered Jan 18 '21 at 14:42

doğukan

23,073
13
57
69

Thanks for your answer! It works in this configuration, but with different number of children it's broken again :( https://jsfiddle.net/phsjunLw/ – Bodzio Jan 18 '21 at 14:51
why you use -1 and +1px? Can I remove it? – doğukan Jan 18 '21 at 14:54
1

The gradient was more complicated and I forgot to remove these 1pixels :D, but after your edit it's working! Thank you! – Bodzio Jan 18 '21 at 15:10

Temani Afif · Answer 2 · 2021-01-18T16:44:41.277

When it comes to repeating gradient always set a very big height to avoid such issue. a 200% should be good for all the positions:

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

    background: repeating-linear-gradient(
        var(--color-a) 0 calc(var(--gradient-height)),
        var(--color-b) 0 calc(var(--gradient-height) * 2)
    );
    background-position:0 -30px;
    background-size: 100% 200%;
}

.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 class="element">AAA</div>
  <div class="element">AAA</div>
</div>

Or make sure the size is a multiplier of the smallest portion:

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

    background: repeating-linear-gradient(
        var(--color-a) 0 calc(var(--gradient-height)),
        var(--color-b) 0 calc(var(--gradient-height) * 2)
    );
    background-position:0 -30px;
    background-size: 100% calc(var(--gradient-height) * 2);
}

.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 class="element">AAA</div>
  <div class="element">AAA</div>
</div>

Or do it without a repeating gradient:

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

.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 class="element">AAA</div>
  <div class="element">AAA</div>
</div>

You can also achieve the coloration you want using nth-child

.element {
  height: 10px;
  padding: 10px;
  line-height: 10px;
}

.element:nth-child(4n + 1),
.element:nth-child(4n + 4){
   background:#eaecef
}

<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 class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
</div>

repeating-linear-gradient broken on the last repetition

2 Answers2