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

242

16 февраля 2018, 17:11

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

Answer 1

Можно сделать с помощью 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; 
}

Answer 2

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

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

Answer 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"); 
}

<div></div>

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

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

<style> 
div { 
width:1920px; 
height:1080px; 
background-color: #ffffff; 
background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png"); 
} 
</style>  
 
<div></div>

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

<style> 
div { 
width:1920px; 
height:1080px; 
background-color: #d5d5d5; 
background-image: url(http://www.transparenttextures.com/patterns/black-twill.png); 
} 
</style>  
 
<div></div>

Фон Фибра

<style> 
div { 
width:1920px; 
height:1080px; 
background-color: #ededed; 
background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre-big.png"); 
} 
</style>  
 
<div></div>

Answer 4

Можно через svg

<div>
</div>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  div {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
  div:before{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: url('line.svg') repeat center; // сама картинка https://drive.google.com/file/d/1DofB76Dmrwjy58coBb2g9SN_w5IlFwjB/view
    background-color: red;
    transform: rotate(-45deg)
  }
</style>