Background

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: centent-box	배경 위치 속성 여부 설정
background-size	background-size: cover	배경이미지 사이즈 설정
background-clip	background-clip: centent-box	배경 적용 범위 설정

Backgroun Gradients

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

Sample1

gradient1

gradient2

gradient3

gradient4

.gradient1 {background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); }
.gradient2 {background-image: linear-gradient(to left, #fbc2eb 0%, #a6c1ee 100%); }
.gradient3 {background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%); }
.gradient4 {background-image: linear-gradient(to bottom, #fbc2eb 0%, #a6c1ee 100%); }

Sample2

gradient5

gradient6

gradient7

gradient8

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

Sample3

gradient9

gradient10

gradient11

gradient12

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

Sample4

gradient13

gradient14

gradient15

gradient16

gradient17

gradient18

gradient19

gradient20

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

Sample5

gradient21

gradient22

gradient23

gradient24

gradient25

gradient26

gradient27

gradient28

.gradient21 {background-image: linear-gradient(140deg, #fbc2eb, #a6c1ee);}
.gradient22 {background-image: linear-gradient(140deg, #fbc2eb, #a6c1ee, #f5576c);}
.gradient23 {background-image: linear-gradient(140deg, #fbc2eb, #a6c1ee, #f5576c, #38f9d7);}
.gradient24 {background-image: linear-gradient(140deg, #fbc2eb, #a6c1ee, #f5576c, #38f9d7, #e2d1c3);}
.gradient25 {background-image: linear-gradient(140deg, #fbc2eb, #a6c1ee, #f5576c, #38f9d7, #e2d1c3, #667eea);}
.gradient26 {background-image: linear-gradient(140deg, #fbc2eb, #a6c1ee, #f5576c, #38f9d7, #e2d1c3, #667eea, #80d0c7);}
.gradient27 {background-image: linear-gradient(140deg, #fbc2eb, #a6c1ee, #f5576c, #38f9d7, #e2d1c3, #667eea, #80d0c7, #ffb199, #f83600);}
.gradient28 {background-image: linear-gradient(140deg, #fbc2eb, #a6c1ee, #f5576c, #38f9d7, #e2d1c3, #667eea, #80d0c7, #ffb199, #f83600, #d558c8);}

Sample6

gradient29

gradient30

gradient31

gradient32

gradient33

gradient34

gradient35

gradient36

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

Sample7

gradient37

gradient38

gradient39

gradient40

gradient41

gradient42

gradient43

gradient44

.bac2 > div {border-radius: 0;}
.gradient37 {background-image: radial-gradient(#2a5298, #6713d2);}
.gradient38 {background-image: radial-gradient(#2a5298, #6713d2, #f5d100);}
.gradient39 {background-image: radial-gradient(#2a5298, #6713d2, #f5d100, #ed6ea0);}
.gradient40 {background-image: radial-gradient(#2a5298, #6713d2, #f5d100, #ed6ea0, #304352);}
.gradient41 {background-image: radial-gradient(#2a5298, #6713d2, #f5d100, #ed6ea0, #304352, #20E2D7);}
.gradient42 {background-image: radial-gradient(#2a5298, #6713d2, #f5d100, #ed6ea0, #304352, #20E2D7, #ffecd2);}
.gradient43 {background-image: radial-gradient(#2a5298, #6713d2, #f5d100, #ed6ea0, #304352, #20E2D7, #ffecd2, #fbc2eb);}
.gradient44 {background-image: radial-gradient(#2a5298, #6713d2, #f5d100, #ed6ea0, #304352, #20E2D7, #ffecd2, #fbc2eb, #c2e9fb);}

Sample8

gradient45

gradient46

gradient47

gradient48

gradient49

gradient50

gradient51

gradient52

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

Sample9

gradient53

gradient54

gradient55

gradient56

gradient57

gradient58

gradient59

gradient60

.bac2 > div {border-radius: 0;}
.gradient53 {background-image: radial-gradient(ellipse farthest-corner at center top, #ff0844 0%, #ffb199 100%);}
.gradient54 {background-image: radial-gradient(ellipse farthest-corner at left top, #ff0844 0%, #ffb199 100%);}
.gradient55 {background-image: radial-gradient(ellipse farthest-corner at right top, #ff0844 0%, #ffb199 100%);}
.gradient56 {background-image: radial-gradient(ellipse farthest-corner at bottom left, #ff0844 0%, #ffb199 100%);}
.gradient57 {background-image: radial-gradient(ellipse farthest-corner at bottom center, #ff0844 0%, #ffb199 100%);}
.gradient58 {background-image: radial-gradient(ellipse farthest-corner at bottom right, #ff0844 0%, #ffb199 100%);}
.gradient59 {background-image: radial-gradient(ellipse farthest-corner at left center, #ff0844 0%, #ffb199 100%);}
.gradient60 {background-image: radial-gradient(ellipse farthest-corner at right center, #ff0844 0%, #ffb199 100%);}

Sample10

gradient61

gradient62

gradient63

gradient64

gradient65

gradient66

gradient67

gradient68

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

Sample11

gradient69

gradient70

gradient71

gradient72

gradient73

gradient74

gradient75

gradient76

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

Sample12

gradient69

gradient78

gradient79

gradient80

gradient81

gradient82

gradient83

gradient84

.gradient77 {background-image: repeating-radial-gradient(#16a085, #f4d03f 5px, #8ddad5 5px, #00cdac 10px);}
.gradient78 {background-image: repeating-radial-gradient(#16a085, #f4d03f 5px, #8ddad5 5px, #00cdac 15px);}
.gradient79 {background-image: repeating-radial-gradient(#16a085, #f4d03f 5px, #8ddad5 5px, #00cdac 20px);}
.gradient80 {background-image: repeating-radial-gradient(#16a085, #f4d03f 5px, #8ddad5 5px, #00cdac 25px);}
.gradient81 {background-image: repeating-radial-gradient(#16a085, #f4d03f 5px, #8ddad5 10px, #00cdac 10px);}
.gradient82 {background-image: repeating-radial-gradient(#16a085, #f4d03f 5px, #8ddad5 15px, #00cdac 15px);}
.gradient83 {background-image: repeating-radial-gradient(#16a085, #f4d03f 5px, #8ddad5 20px, #00cdac 20px);}
.gradient84 {background-image: repeating-radial-gradient(#16a085, #f4d03f 5px, #8ddad5 25px, #00cdac 25px);}

Sample13

gradient85

gradient86

gradient87

gradient88

gradient89

gradient90

gradient91

gradient92

.gradient85 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}
.gradient86 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}
.gradient86 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}
.gradient87 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}
.gradient88 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}
.gradient89 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}
.gradient90 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}
.gradient91 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}
.gradient92 {background: linear-gradient(145deg, #16a085, #8ddad5 ) fixed;}

Sample14

gradient93

gradient94

gradient95

gradient96

gradient97

gradient98

gradient99

gradient100

.gradient93 {background: radial-gradient(#16a085, #c7eafd ) fixed;}
.gradient94 {background: radial-gradient(#16a085, #c7eafd ) fixed;}
.gradient95 {background: radial-gradient(#16a085, #c7eafd ) fixed;}
.gradient96 {background: radial-gradient(#16a085, #c7eafd ) fixed;}
.gradient97 {background: radial-gradient(#16a085, #c7eafd ) fixed;}
.gradient98 {background: radial-gradient(#16a085, #c7eafd ) fixed;}
.gradient99 {background: radial-gradient(#16a085, #c7eafd ) fixed;}
.gradient100 {background: radial-gradient(#16a085, #c7eafd ) fixed;}