Как сделать разноцветный background с повторением?

#html #css

Нужно расположить 4 цвета последовательно. Каждый цветовой блок 100px. Если ширина
экрана больше 400px, то повторять цвета. Если меньше, то убирать цвета. Цвета добавлять
и удалять нужно по мере увеличения и уменьшения экрана. То есть, на 360px будет 3 полноценных
цвета и 60px четвёртого цвета.

Допустим для экрана в 400px будет так:



Для 600px будет так:



Как это сделать на чистом CSS (без картинок)?
    

Ответы

Ответ 1

Очень интересный вопрос, нашел следующее решение:



.block, .second-block {
  width: 400px;
  height: 100px;
  margin-bottom: 20px;
  background-image: repeating-linear-gradient(90deg, #FF0000 0px, #FF0000 100px,
#FF9000 100px, #FF9000 200px, #FCFF00 200px, #FCFF00 300px, #12FF00 300px, #12FF00 400px);
}

.second-block {
  width: 600px;
}






Инфо: MDN


Ответ 2

Ссылка на спецификацию
Можно ли использовать
Примеры от Mozilla



.rainbow {
  box-sizing: border-box;
  background: repeating-linear-gradient(
  to right,
    red 0%, red 50px,
    orange 51px, orange 100px,
    yellow 101px, yellow 150px,
    green 151px, green 200px,
    aqua 201px, aqua 250px,
    blue 251px, blue 300px,
    purple 301px, purple 350px
  );
  width: 500px;
  height: 50px;
  margin-top: 30px;
}

.rainbow.half-width {
  width: 250px;
}




Ответ 3

Вот так можно :)

background-image: repeating-linear-gradient(90deg, #FF0000 0px, #FF0000 100px, #FF9000
100px, #FF9000 200px, #FCFF00 200px, #FCFF00 300px, #12FF00 300px, #12FF00 400px);


Ответ 4

О ужас, самый ужасный вариант у меня.
Как вариант обернуть все в один див и накидать туда дивы с бэкграундами с "запасом"
для самого широкого монитора.  

Минусы есть: не поддерживается ie  до 10, последний блок будет добавляться, если
ширина контейнера кратна ширине блоков.  

Это костылевидный г/код, поэтому рекомендовал бы все таки использовать не только
css, а jQuery в помощь. Тогда можно будет подсчитать ширину контейнера и запилить сколько
надо вложений и последний блок необходимой ширины.  

Как вариант генерировать изображение на сервере и вставлять его бэкграундом с повторением
по горизонтали. Для генерации необходимо будет написать хоть какую-то модель.



.flex {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  max-height: 100px;
  overflow: hidden;
}
.flex > div {
  width: 100px;
  height: 100px;
}
.flex > div.clr1 {
  background: #FF0000;
}
.flex > div.clr2 {
  background: #FF9000;
}
.flex > div.clr3 {
  background: #FCFF00;
}
.flex > div.clr4 {
  background: #12FF00;
}