repeating-linear-gradient 을 사용한 전체 배경 모음 1

[즐거히]

전체 배경용 repeating-linear-gradient 예제
1

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(45deg, rgb(223, 252, 246,0.3), rgba(195, 250, 201,0.4),  rgba(247, 250, 195,.3),rgb(255, 219, 221,0.3) 10%),
repeating-linear-gradient(-45deg, rgb(223, 252, 246,0.3),  rgba(195, 250, 201,.4), rgba(247, 250, 195,.3),rgb(255, 219, 221,0.3) 10%);
background-attachment: fixed; 
background-color: #f7e9e9 ; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


2

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(45deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.3), rgba(164, 221, 168,.3) 5%),
repeating-linear-gradient(-45deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.3), rgba(164, 221, 168,.3) 5%);
background-attachment: fixed; 
background-color: #f7f7e9 ; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


3

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(45deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.5), rgba(164, 221, 168,.3) 10%),
repeating-linear-gradient(-45deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.5), rgba(164, 221, 168,.3) 10%);
background-attachment: fixed; 
background-color: #f7efe9 ; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


4

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(0deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.5), rgba(164, 221, 168,.3) 10%),
repeating-linear-gradient(90deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.5), rgba(164, 221, 168,.3) 5%);
background-attachment: fixed; 
background-color: #f7efe9 ; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


5

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(45deg, rgba(241, 207, 244,.4), rgba(248, 243, 196,0.6), rgba(164, 221, 168,.4) 5%),
repeating-linear-gradient(-45deg, rgba(241, 207, 244,.4), rgba(248, 243, 196,0.6), rgba(164, 221, 168,.4) 5%);
background-attachment: fixed; 
background-color: #cffad4 ; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


6

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(0deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.5), rgba(164, 221, 168,.3) 10%),
repeating-linear-gradient(90deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.5), rgba(164, 221, 168,.3) 5%);
background-attachment: fixed; 
background-color: #cffad4 ; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


7

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(0deg, rgba(241, 207, 244,.4), rgba(248, 243, 196,0.6), rgba(164, 221, 168,.4) 20%),
repeating-linear-gradient(90deg, rgba(241, 207, 244,.4), rgba(248, 243, 196,0.6), rgba(164, 221, 168,.4) 10%);
background-attachment: fixed; 
background-color: #cffad4 ; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


8

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(45deg, rgba(241, 207, 244,.3), rgba(255, 0, 0,0.1), rgba(248, 243, 196,0.3),  rgba(164, 221, 168,.3) 10%),
repeating-linear-gradient(-45deg, rgba(241, 207, 244,.3), rgba(255, 0, 0,0.1), rgba(248, 243, 196,0.3),  rgba(164, 221, 168,.3) 10%);
background-color: #f7efe9 ; 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


9

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(0deg, rgba(241, 207, 244,.3), rgba(255, 0, 0,0.1), rgba(248, 243, 196,0.3),  rgba(164, 221, 168,.3) 20%),
repeating-linear-gradient(90deg, rgba(241, 207, 244,.3), rgba(255, 0, 0,0.1), rgba(248, 243, 196,0.3),  rgba(164, 221, 168,.3) 10%);
background-color: #f7efe9 ; 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


10

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(0deg, rgba(0, 255, 128,.2), rgba(125, 217, 179,0.3), rgba(255, 10, 153,0.2), rgba(204, 242, 255,.3) 25%),
repeating-linear-gradient(90deg, rgba(255, 217, 179,.2), rgba(0, 255, 128,0.3), rgba(255, 255, 153,0.2), rgba(204, 242, 255,.3) 10%);
background-color: #f7efe9 ; 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


11

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(45deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.5), rgba(164, 221, 168,.3) 10%),
repeating-linear-gradient(-45deg, rgba(241, 207, 244,.3), rgba(248, 243, 196,0.5), rgba(164, 221, 168,.3) 10%);
background-attachment: fixed; 
background-color: #cffad4 ; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


12

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(0deg, rgba(0, 255, 128,.2), rgba(125, 217, 179,0.3), rgba(255, 255, 128,0.2), rgba(204, 242, 255,.3) 25%),
repeating-linear-gradient(90deg, rgba(255, 217, 179,.2), rgba(0, 255, 128,0.3), rgba(255, 255, 128,0.2), rgba(204, 242, 255,.3) 10%);
background-color:  #ffffff ; 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


13

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(45deg, rgba(0, 255, 128,.2), rgba(125, 217, 179,0.3), rgba(255, 255, 128,0.2), rgba(204, 242, 255,.3) 5%),
repeating-linear-gradient(-45deg, rgba(255, 217, 179,.2), rgba(0, 255, 128,0.3), rgba(255, 255, 128,0.2), rgba(204, 242, 255,.3) 5%);
background-color:  #ffffff ; 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


14

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(45deg, rgba(0, 255, 128,.2), rgba(125, 217, 179,0.3), rgba(255, 255, 128,0.2), rgba(204, 242, 255,.3) 8%),
repeating-linear-gradient(-45deg, rgba(255, 217, 179,.2), rgba(0, 255, 128,0.3), rgba(255, 255, 128,0.2), rgba(204, 242, 255,.3) 8%);
background-color:  #ffffff ; 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>


15

<style>
body, #primaryContent
{ background-image: 
repeating-linear-gradient(60deg, rgba(0, 255, 128,.2), rgba(125, 217, 179,0.3), rgba(255, 255, 128,0.2), rgba(204, 242, 255,.3), rgba(255, 179, 255,0.2) 4%),
repeating-linear-gradient(-60deg, rgba(255, 217, 179,.2), rgba(0, 255, 128,0.3), rgba(255, 255, 128,0.2), rgba(204, 242, 255,.3), rgba(255, 179, 255, 0.2) 4%);
background-color:  #ffffff ; 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: bottom right;
background-size: cover ;
 }
</style>

[즐거히]

repeating-linear-gradient를 사용하여 전체 배경에 무늬를
배치한 예제입니다.

태그만으로 만들어 지는 것으로
색상과 투명도, 방향 각, 크기 수치(%) 등의 속성 값을 수정하면 사용자만의 스타일로 응용할 수 있으니 할용 해 보시기 바랍니다.

각 예제 아래에 제공된 소스만 복사해 전체 배경으로 사용해도 되고,
이미지를 추가 배치할 수도 있습니다.
(일반 전체 배경 소스 사용법과 같음)

테이블에 배경으로도 사용할 수 있습니다.
단 전체 배경에 사용되는 background-attachment: fixed; 속성은
테이블 태그 소스에서는 삭제해야 합니다

테이블 사용예제를 답글로 올려 놓으니 참고해 보세요.