Background

Property	Sample	Description
background	background : #000 url(background.gif) no-repeat top center	배경 속성 단축형
background-image	background-image : url(이미지 경로)	배경 이미지 설정
background-repeat	background-repeat : no-repeat	배경 이미지 반복 여부 설정
background-attachment	background-attachment : fixed	배경 이미지 고정 여부 설정
background-color	background-color : #fff;	배경색 설정
background-position	background-position : top;	배경 이미지 위치 설정
background-origin	background-origin : content-box;	배경 위치 속성 여부 설정
background-size	background-size : cover	배경이미지 사이즈 설정
background-clip	background-clip : content-box;	배경 적용 범위 설정

Background Gradients

Value	Sample	Description
linear-gradient	background-image : linear-gradient(direction, color1, color2, ....)	선형 그라데이션 백그라운드를 설정합니다.
radial-gradient	background-image : radial-gradient (direction, color1, color2, ....)	원형 그라데이션 백그라운드를 설정합니다.
repeating-linear-gradient	background-image : repeating-linear-gradient (direction, color1, color2, ....)	반복 선형 그라데이션 백그라운드를 설정합니다.
repeating-radial-gradient	background-image : repeating-radial-gradient (direction, color1, color2, ....)	반복 원형 그라데이션 백그라운드를 설정합니다.

Sample1

                 
.block {width: 180px; height: 180px; margin: 50px; font-size: 18px; line-height: 180px; color: #fff; cursor: pointer; text-align: center; float: left;}
.block > div {border-radius: 50%;}
.gradient1 {background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); }
.gradient2 {background-image: linear-gradient(to left, #a18cd1 0%, #fbc2eb 100%); }
.gradient3 {background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%); }
.gradient4 {background-image: linear-gradient(to bottom, #a18cd1 0%, #fbc2eb 100%); }    

Sample2

.gradient5 {background-image: -webkit-linear-gradient(top, #a18cd1 0%, #fbc2eb 100%); }
.gradient6 {background-image: -webkit-linear-gradient(left, #a18cd1 0%, #fbc2eb 100%); }
.gradient7 {background-image: -webkit-linear-gradient(right, #a18cd1 0%, #fbc2eb 100%); }
.gradient8 {background-image:-webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%); }   

Sample3

.gradient9 {background-image: -webkit-linear-gradient(left top, #a18cd1 0%, #fbc2eb 100%); }
.gradient10 {background-image: -webkit-linear-gradient(right left, #a18cd1 0%, #fbc2eb 100%); }
.gradient11 {background-image: -webkit-linear-gradient(left bottom, #a18cd1 0%, #fbc2eb 100%); }
.gradient12 {background-image:-webkit-linear-gradient(right bottom, #a18cd1 0%, #fbc2eb 100%); }  

Sample4

.gradient13 {background-image: linear-gradient(0deg, #fa709a 0%, #fbc2eb 100%); }
.gradient14 {background-image: linear-gradient(20deg, #fa709a 0%, #fbc2eb 100%); }
.gradient15 {background-image: linear-gradient(40deg, #fa709a 0%, #fbc2eb 100%); }
.gradient16 {background-image: linear-gradient(60deg, #fa709a 0%, #fbc2eb 100%); }
.gradient17 {background-image: linear-gradient(80deg, #fa709a 0%, #fbc2eb 100%); }
.gradient18 {background-image: linear-gradient(100deg, #fa709a 0%, #fbc2eb 100%); }
.gradient19 {background-image: linear-gradient(120deg, #fa709a 0%, #fbc2eb 100%); }
.gradient20 {background-image: linear-gradient(140deg,  #fa709a 0%, #fbc2eb 100%); }

Sample5

.gradient21 {background-image: linear-gradient(0deg, #FF719A,  #fee140); }
.gradient22 {background-image: linear-gradient(20deg, #FF719A, #fee140, #fa709a ); }
.gradient23 {background-image: linear-gradient(40deg, #FF719A, #fee140, #fa709a, #30cfd0 ); }
.gradient24 {background-image: linear-gradient(60deg, #FF719A, #fee140, #fa709a, #30cfd0, #66a6ff ); }
.gradient25 {background-image: linear-gradient(80deg, #FF719A, #fee140, #fa709a, #30cfd0, #66a6ff, #dfe9f3); }
.gradient26 {background-image: linear-gradient(100deg, #FF719A,#fee140, #fa709a, #30cfd0, #66a6ff, #dfe9f3, #fff ); }
.gradient27 {background-image: linear-gradient(120deg, #FF719A, #fee140, #fa709a, #30cfd0, #66a6ff, #dfe9f3, #fff, #f578dc); }
.gradient28 {background-image: linear-gradient(140deg,  #FF719A, #fee140, #fa709a, #30cfd0, #66a6ff, #dfe9f3, #fff, #f578dc, #FF719A ); }

Sample6

.gradient29 {background-image: linear-gradient(140deg, #d5dee7 0%,  #ffafbd 20%, #c9ffbf 100% ); }
.gradient30 {background-image: linear-gradient(140deg, #d5dee7 0%, #ffafbd 30%, #c9ffbf 100% ); }
.gradient31 {background-image: linear-gradient(140deg, #d5dee7 0%, #ffafbd 40%, #c9ffbf 100%  ); }
.gradient32 {background-image: linear-gradient(140deg, #d5dee7 0%, #ffafbd 50%, #c9ffbf 100% ); }
.gradient33 {background-image: linear-gradient(140deg, #d5dee7 0%, #ffafbd 60%, #c9ffbf 100% ); }
.gradient34 {background-image: linear-gradient(140deg, #d5dee7 0%,#ffafbd 70%, #c9ffbf 100% ); }
.gradient35 {background-image: linear-gradient(140deg, #d5dee7 0%, #ffafbd 80%, #c9ffbf 100% ); }
.gradient36 {background-image: linear-gradient(140deg,  #d5dee7 0%, #ffafbd 90%, #c9ffbf 100% ); }

Sample7

.gradient37 {background-image: radial-gradient(#D4FFEC , #57F2CC); }
.gradient38 {background-image: radial-gradient(#D4FFEC , #57F2CC , #4596FB ); }
.gradient39 {background-image: radial-gradient(#D4FFEC , #57F2CC , #4596FB, #77FFD2 ); }
.gradient40 {background-image: radial-gradient(#D4FFEC , #57F2CC , #4596FB, #77FFD2, #6297DB, #1EECFF ); }
.gradient41 {background-image: radial-gradient(#D4FFEC , #57F2CC , #4596FB, #77FFD2, #6297DB, #1EECFF, #69EACB  ); }
.gradient42 {background-image: radial-gradient(#D4FFEC , #57F2CC , #4596FB, #77FFD2, #6297DB, #1EECFF, #69EACB, #EACCF8  ); }
.gradient43 {background-image: radial-gradient(#D4FFEC , #57F2CC , #4596FB, #77FFD2, #6297DB , #1EECFF, #69EACB, #EACCF8, #6654F1 ); }
.gradient44 {background-image: radial-gradient(#D4FFEC , #57F2CC , #4596FB, #77FFD2, #6297DB, #1EECFF, #69EACB, #EACCF8, #6654F1, #fff;  ); }

Sample8

.gradient45 {background-image: radial-gradient(#7085B6 0%, #87A7D9 20%, #DEF3F8 100%); }
.gradient46 {background-image: radial-gradient(#7085B6 0%, #87A7D9 30%, #DEF3F8 100%); }
.gradient47 {background-image: radial-gradient(#7085B6 0%, #87A7D9 40%, #DEF3F8 100%); }
.gradient48 {background-image: radial-gradient(#7085B6 0%, #87A7D9 50%, #DEF3F8 100%); }
.gradient49 {background-image: radial-gradient(#7085B6 0%, #87A7D9 60%, #DEF3F8 100%); }
.gradient50 {background-image: radial-gradient(#7085B6 0%, #87A7D9 70%, #DEF3F8 100%); }
.gradient51 {background-image: radial-gradient(#7085B6 0%, #87A7D9 80%, #DEF3F8 100% ); }
.gradient52 {background-image: radial-gradient(#7085B6 0%, #87A7D9 90%, #DEF3F8 100%); }

Sample9

.gradient53 {background-image: radial-gradient(ellipse farthest-corner at center top, #f5f7fa 0%, #c3cfe2 100%);}
.gradient54 {background-image: radial-gradient(ellipse farthest-corner at left top, #f5f7fa 0%, #c3cfe2 100%);}
.gradient55 {background-image: radial-gradient(ellipse farthest-corner at right top, #f5f7fa 0%, #c3cfe2 100%);}
.gradient56 {background-image: radial-gradient(ellipse farthest-corner at bottom left, #f5f7fa 0%, #c3cfe2 100%);}
.gradient57 {background-image: radial-gradient(ellipse farthest-corner at bottom center, #f5f7fa 0%, #c3cfe2 100%);}
.gradient58 {background-image: radial-gradient(ellipse farthest-corner at bottom right, #f5f7fa 0%, #c3cfe2 100%);}
.gradient59 {background-image: radial-gradient(ellipse farthest-corner at left center, #f5f7fa 0%, #c3cfe2 100%);}
.gradient60 {background-image: radial-gradient(ellipse farthest-corner at right center, #f5f7fa 0%, #c3cfe2 100%);}

Sample10

.gradient61 {background-image: linear-gradient(0deg, #E3FDF5  50%, #FFE6FA 50%);}
.gradient62 {background-image: linear-gradient(20deg, #E3FDF5  50%, #FFE6FA 50%);}
.gradient63 {background-image: linear-gradient(40deg, #E3FDF5  50%, #FFE6FA 50%);}
.gradient64 {background-image: linear-gradient(60deg, #E3FDF5  50%, #FFE6FA 50%);}
.gradient65 {background-image: linear-gradient(80deg, #E3FDF5  50%, #FFE6FA 50%);}
.gradient66 {background-image: linear-gradient(100deg, #E3FDF5  50%, #FFE6FA 50%);}
.gradient67 {background-image: linear-gradient(120deg, #E3FDF5  50%, #FFE6FA 50%);}
.gradient68 {background-image: linear-gradient(140deg, #E3FDF5  50%, #FFE6FA 50%);}

Sample11

.gradient69 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient70 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient71 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient72 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient73 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient74 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #33691e 45px);}
.gradient75 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #33691e 45px);}
.gradient76 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 25px, #33691e 45px);}

Sample12

.gradient77 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 10px);}
.gradient78 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 15px);}
.gradient79 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 20px);}
.gradient80 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 25px);}
.gradient81 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient82 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient83 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient84 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}

Sample13

.gradient85 {background-image: repeating-linear-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 10px);}
.gradient86 {background-image: repeating-linear-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 15px);}
.gradient87 {background-image: repeating-linear-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 20px);}
.gradient88 {background-image: repeating-linear-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 25px);}
.gradient89 {background-image: repeating-linear-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient90 {background-image: repeating-linear-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient91 {background-image: repeating-linear-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient92 {background-image: repeating-linear-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}

Sample14

.gradient93 {background: linear-gradient(145deg, #fff1eb, #ace0f9) fixed;} 
.gradient94 {background: linear-gradient(145deg, #fff1eb, #ace0f9) fixed;} 
.gradient95 {background: linear-gradient(145deg, #fff1eb, #ace0f9) fixed;} 
.gradient96 {background: linear-gradient(145deg, #fff1eb, #ace0f9) fixed;} 
.gradient97 {background: linear-gradient(145deg, #fff1eb, #ace0f9) fixed;} 
.gradient98 {background: linear-gradient(145deg, #fff1eb, #ace0f9) fixed;} 
.gradient99 {background: linear-gradient(145deg, #fff1eb, #ace0f9) fixed;} 
.gradient100 {background: linear-gradient(145deg, #fff1eb, #ace0f9) fixed;} 

Sample15

.gradient101 {background: radial-gradient( #fff1eb, #bcbcbc) fixed;} 
.gradient102 {background: radial-gradient(  #fff1eb, #bcbcbc) fixed;} 
.gradient103 {background: radial-gradient(  #fff1eb, #bcbcbc) fixed;} 
.gradient104 {background: radial-gradient(  #fff1eb, #bcbcbc) fixed;} 
.gradient105 {background: radial-gradient(  #fff1eb, #bcbcbc) fixed;} 
.gradient106 {background: radial-gradient(  #fff1eb, #bcbcbc) fixed;} 
.gradient107 {background: radial-gradient(  #fff1eb, #bcbcbc) fixed;} 
.gradient108 {background: radial-gradient(  #fff1eb, #bcbcbc) fixed;}  

Sample-repeating-linear-gradiants

See the Pen Repeating-linear-gradient background by jeongahlee (@jeongahlee) on CodePen.

Background-pattern1

See the Pen Background-pattern by jeongahlee (@jeongahlee) on CodePen.

Background-pattern2

See the Pen PXpwmV by jeongahlee (@jeongahlee) on CodePen.

Background-pattern3

See the Pen VqpYWx by jeongahlee (@jeongahlee) on CodePen.

Background-Effect1

See the Pen Background Effect1 by jeongahlee (@jeongahlee) on CodePen.

Background-Effect2

See the Pen Background-Effect2 by jeongahlee (@jeongahlee) on CodePen.

Background Random Images

See the Pen Random Background by jeongahlee (@jeongahlee) on CodePen.