background css custom made

background CSS 커스텀 하기

45도 각

repeating-linear-gradient(패턴의 각도, 색상1,색상1 px, 색상2 10px, 색상2 20px );

.class-name or #ID-name {
  color: white; /*텍스트색상*/
  background: repeating-linear-gradient(
    45deg,         /*패턴의각도좌측하단기준*/
    #606dbc,       /*색상1*/
    #606dbc 10px,  /*색상1범위 간격값*/
    #465298 10px,  /*색상2범위가격값*/
    #465298 20px   /*색상2패턴의크기값*/
  );
}

스프라이트

linear-gradient(방향값, 색상1, 색상1 범위%, 색상2 범위%, 색상2);

.class-name or #ID-name {
    color: white;     /**/
    background: linear-gradient(to bottom, #5d9634, #5d9634 50%, #538c2b 50%, #538c2b);
    background-size: 100% 3px;         /*가로폭과넓이값*/
}