I’ve created an element that uses repeating-linear-gradient as the background image. At the moment,

Question

0

Asked: June 9, 20262026-06-09T23:02:47+00:00 2026-06-09T23:02:47+00:00

I’ve created an element that uses repeating-linear-gradient as the background image. At the moment,

0

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