Фон страницы в виде диагональных линий

#css #вёрстка #svg #веб_дизайн

Для страницы сайта есть фоновая картинка в виде диагональных линий. Задавал ей background-repeat,
но тогда стыковка заметна. При таком фоне наверное невозможно сделать маленький узор,
а потом повторять его? Может на CSS лучше будет сделать, если такое возможно?


    

Ответы

Ответ 1

Отключить фоновое изображение и сделать repeating-linear-gradient



  body {
    background: repeating-linear-gradient(-45deg,#222,red 10px, gold 10px) fixed;
   }


Ответ 2

Можно сделать с помощью linear-gradient()



body {
  background: linear-gradient(45deg,rgba(0, 0, 0, 1) 47%,rgba(111, 255, 255, 1) 50%,rgba(0,
0, 0, 1) 0%);
  background-size: 0.9rem 0.9rem;
}


Ответ 3

Очень агрессивный фон в вопросе. Но как говорится, на каждый вкус,- свои фломастеры. 
Есть очень полезный онлайн ресурс для формирования фона -  https://www.transparenttextures.com/ 
Можно подобрать себе практически любой фон, с любым цветом. 
И в дальнейшем с помощью правил CSS скорректировать предпочитаемые цветовые оттенки.
Ваш вариант цвета - background-color: #c52230;
В принципе интерфейс интуитивно понятен, но на всякий случай кратко последовательность
действий: 


Выбираете подходящий рисунок фона и нажимаете - createWallpaper
Далее выбираете цвет


  


Выбираете нужный вам размер фона, брать лучше большой, чтобы не было
сшивок





И забираете код CSS


   



   div {
width:1920px;
height:1080px;
background-color: #c52230;
background-image: url("http://www.transparenttextures.com/patterns/black-mamba.png");
}
  




Несколько фонов для примера

Пиксельный фон



 

  


  

Диагональный серый (хотите красный,- замените на background-color: #c52230;



 

  




Фон Фибра  



 




Ответ 4

Можно через svg