CODEWITHSUNDEEP
cssrepeating-linear-gradient
Bodzio
Bodzio

Reputation: 2520

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/

Upvotes: 1

Views: 174

Answers (2)

Temani Afif
Temani Afif

Reputation: 273261

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>

Upvotes: 1

doğukan
doğukan

Reputation: 27461

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>

Upvotes: 1

Related Questions