可靠地创建重复线性渐变图案

Question

I've created an element that uses repeating-linear-gradient as the background image. At the moment, the size of the element adversely effects the background pattern. My goal is to be able to consistently produce the same background pattern regardless of the size of the element.

I know the simplest way to get this pattern every time is to create a .png with the pattern that can be repeated, but is there anyway to make this without an image? Legacy browser compatibility is not an issue.

I'm just looking for suggestions I might not have thought of to solve this experiment.

To demonstrate, I've created this code pen .

HTML

<div class="bar"></div>

CSS

.bar {
  display: block;
  width: 695px;
  height: 44px;
  left: 50%;
  margin: -22px -347px;
  position: absolute;
  top: 10%;
  background-color: #4d4d4d;
  background-image: repeating-linear-gradient(45deg, rgba(0, 191, 255, 0.5), rgba(0, 191, 255, 0.5) 1px, transparent 1px, transparent 15px), 
   repeating-linear-gradient(-45deg, rgba(39, 216, 5, 0.59), rgba(39, 216, 5, 0.59) 1px, transparent 1px, transparent 15px);
}
.bar.big {
  width: 1000px;
  top: 25%;
  margin-left: -500px;
  maring-right: -500px;
}
.bar.small {
  width: 400px;
  top: 40%;
  margin-left: -200px;
  maring-right: -200px;
}

Answer 1

Set the background-size for .bar :

background-size: 695px 44px;

DEMO