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

Background Gradients

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

Sample

gradient1

gradient2

gradient3

gradient4

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

Sample 2

gradient5

gradient6

gradient7

gradient8

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

Sample 3

gradient9

gradient10

gradient11

gradient12

 
.gradient10 {background-image: -webkit-linear-gradient(left top, #9890e3 0%, #b1f4cf 100%);}
.gradient11 {background-image: -webkit-linear-gradient(right top, #9890e3 0%, #b1f4cf 100%);}
.gradient12 {background-image: -webkit-linear-gradient(left bottom, #9890e3 0%, #b1f4cf 100%);}
.gradient13 {background-image: -webkit-linear-gradient(right bottom, #9890e3 0%, #b1f4cf 100%);}

Sample 4

gradient13

gradient14

gradient15

gradient16

gradient17

gradient18

gradient19

gradient20

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

Sample 5

gradient21

gradient22

gradient23

gradient24

gradient25

gradient26

gradient27

gradient28

 
.gradient21 {background-image: linear-gradient(140deg, #13547a 0%, #80d0c7);}
.gradient22 {background-image: linear-gradient(140deg, #13547a 0%, #80d0c7,#e5b2ca);}
.gradient23 {background-image: linear-gradient(140deg, #13547a 0%, #80d0c7,#e5b2ca,#00c9ff);}
.gradient24 {background-image: linear-gradient(140deg, #13547a 0%, #80d0c7,#e5b2ca,#00c9ff,#deecdd);}
.gradient25 {background-image: linear-gradient(140deg, #13547a 0%, #80d0c7,#e5b2ca,#00c9ff,#deecdd,#24d292);}
.gradient26 {background-image: linear-gradient(140deg, #13547a 0%, #80d0c7,#e5b2ca,#00c9ff,#deecdd,#24d292,#d558c8);}
.gradient27 {background-image: linear-gradient(140deg, #13547a 0%, #80d0c7,#e5b2ca,#00c9ff,#deecdd,#24d292,#d558c8,#dcb0ed);}
.gradient28 {background-image: linear-gradient(140deg, #13547a 0%, #80d0c7,#e5b2ca,#00c9ff,#deecdd,#24d292,#d558c8,#dcb0ed,#99c99c);}

Sample 6

gradient29

gradient30

gradient31

gradient32

gradient33

gradient34

gradient35

gradient36

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

Sample 7

gradient37

gradient38

gradient39

gradient40

gradient41

gradient42

gradient43

gradient44

 
.gradient37 {background-image: radial-gradient(#fa709a, #fee140, #f09819);}
.gradient38 {background-image: radial-gradient(#fa709a, #fee140, #f09819, #f5576c);}
.gradient39 {background-image: radial-gradient(#fa709a, #fee140, #f09819, #f5576c, #f093fb);}
.gradient40 {background-image: radial-gradient(#fa709a, #fee140, #f09819, #f5576c, #f093fb, #5ee7df);}
.gradient41 {background-image: radial-gradient(#fa709a, #fee140, #f09819, #f5576c, #f093fb, #5ee7df, #b490ca);}
.gradient42 {background-image: radial-gradient(#fa709a, #fee140, #f09819, #f5576c, #f093fb, #5ee7df, #b490ca, #330867);}
.gradient43 {background-image: radial-gradient(#fa709a, #fee140, #f09819, #f5576c, #f093fb, #5ee7df, #b490ca, #330867, #30cfd0);}
.gradient44 {background-image: radial-gradient(#fa709a, #fee140, #f09819, #f5576c, #f093fb, #5ee7df, #b490ca, #330867, #30cfd0, #00f2fe);}

Sample 8

gradient45

gradient46

gradient47

gradient48

gradient49

gradient50

gradient51

gradient52

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

Sample 9

gradient53

gradient54

gradient55

gradient56

gradient57

gradient58

gradient59

gradient60

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

Sample 10

gradient61

gradient62

gradient63

gradient64

gradient65

gradient66

gradient67

gradient68

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

Sample 11

gradient69

gradient70

gradient71

gradient72

gradient73

gradient74

gradient75

gradient76

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

Sample 12

gradient77

gradient78

gradient79

gradient80

gradient81

gradient82

gradient83

gradient84

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

Sample 13

gradient85

gradient86

gradient87

gradient88

gradient89

gradient90

gradient91

gradient92

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

Sample 14

gradient93

gradient94

gradient95

gradient96

gradient97

gradient98

gradient99

gradient100

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

Sample - repeating-linear-gardient

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

Sample - Background-pattern

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

Sample - Background-pattern2

See the Pen maWymz by HyeInLee (@leehye1204) on CodePen.

Sample - Background-pattern3

See the Pen Background-parttern3 by HyeInLee (@leehye1204) on CodePen.

Sample - Background-pattern4

See the Pen Background-pattern4 by HyeInLee (@leehye1204) on CodePen.

Sample - Background-pattern5

See the Pen Background-pattern5 by HyeInLee (@leehye1204) on CodePen.

Sample - Effect1

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

Sample - Effect2

See the Pen Background Effect2 by HyeInLee (@leehye1204) on CodePen.

Background Random Image

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