CSS: 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

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

Sample1

gradient1

gradient2

gradient3

gradient4

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

Sample2

gradient5

gradient6

gradient7

gradient8

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

Sample3

gradient9

gradient10

gradient11

gradient12

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

Sample4

gradient13

gradient14

gradient15

gradient16

gradient17

gradient18

gradient19

gradient20

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

Sample5

gradient21

gradient22

gradient23

gradient24

gradient25

gradient26

gradient27

gradient28

    .gradient21 {background-image: linear-gradient(140deg, #30cfd0, #330867);}     .gradient22 {background-image: linear-gradient(140deg, #30cfd0, #330867, #30cfd0);}     .gradient23 {background-image: linear-gradient(140deg, #30cfd0, #330867, #30cfd0, #764ba2);}     .gradient24 {background-image: linear-gradient(140deg, #30cfd0, #330867, #30cfd0, #764ba2, #6a11cb);}     .gradient25 {background-image: linear-gradient(140deg, #30cfd0, #330867, #30cfd0, #764ba2, #6a11cb, #a3bded);}     .gradient26 {background-image: linear-gradient(140deg, #30cfd0, #330867, #30cfd0, #764ba2, #6a11cb, #a3bded, #0250c5);}     .gradient27 {background-image: linear-gradient(140deg, #30cfd0, #330867, #30cfd0, #764ba2, #6a11cb, #a3bded, #0250c5, #d43f8d);}     .gradient28 {background-image: linear-gradient(140deg, #30cfd0, #330867, #30cfd0, #764ba2, #6a11cb, #a3bded, #0250c5, #d43f8d, #80d0c7);} 

Sample6

gradient29

gradient30

gradient31

gradient32

gradient33

gradient34

gradient35

gradient36

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

Sample7

gradient37

gradient38

gradient39

gradient40

gradient41

gradient42

gradient43

gradient44

    .gradient37 {background-image: radial-gradient(#2CD8D5, #C5C1FF);}     .gradient38 {background-image: radial-gradient(#2CD8D5, #C5C1FF, #FFBAC3);}     .gradient39 {background-image: radial-gradient(#2CD8D5, #C5C1FF, #FFBAC3, #6B8DD6);}     .gradient40 {background-image: radial-gradient(#2CD8D5, #C5C1FF, #FFBAC3, #6B8DD6, #FFBAC3);}     .gradient41 {background-image: radial-gradient(#2CD8D5, #C5C1FF, #FFBAC3, #6B8DD6, #FFBAC3, #20E2D7);}     .gradient42 {background-image: radial-gradient(#2CD8D5, #C5C1FF, #FFBAC3, #6B8DD6, #FFBAC3, #20E2D7 ,#f6f3ff);}     .gradient43 {background-image: radial-gradient(#2CD8D5, #C5C1FF, #FFBAC3, #6B8DD6, #FFBAC3, #20E2D7 ,#f6f3ff ,#0ba360);}     .gradient44 {background-image: radial-gradient(#2CD8D5, #C5C1FF, #FFBAC3, #6B8DD6, #FFBAC3, #20E2D7 ,#f6f3ff ,#0ba360, #009efd);} 

Sample8

gradient45

gradient46

gradient47

gradient48

gradient49

gradient50

gradient51

gradient52

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

Sample9

gradient53

gradient54

gradient55

gradient56

gradient57

gradient58

gradient59

gradient60

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

Sample10

gradient61

gradient62

gradient63

gradient64

gradient65

gradient66

gradient67

gradient68

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

Sample11

gradient69

gradient70

gradient71

gradient72

gradient73

gradient74

gradient75

gradient76

    .gradient69 {background-image: repeating-linear-gradient(45deg, trans.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 15px, #33691e 45px);}parent 5px, transparent 25px, #33691e 10px, #33691e 45px);} 

Sample12

gradient77

gradient78

gradient79

gradient80

gradient81

gradient82

gradient83

gradient84

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

Sample13

gradient85

gradient86

gradient87

gradient88

gradient89

gradient90

gradient91

gradient92

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

Sample14

gradient93

gradient94

gradient95

gradient96

gradient97

gradient98

gradient99

gradient100

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

Sample : repeating-linear-gradient

See the Pen Repeating-linear-gradient background by Jiwon Son (@jiwonson) on CodePen.

Sample : Background Pattern1

See the Pen Background-pattern by Jiwon Son (@jiwonson) on CodePen.

Sample : Background Pattern2

See the Pen LMWEQd by Jiwon Son (@jiwonson) on CodePen.

Sample : Background Pattern3

See the Pen KbWwQV by Jiwon Son (@jiwonson) on CodePen.

Sample : Background Pattern4

See the Pen VqpYyB by Jiwon Son (@jiwonson) on CodePen.

Sample : Background Pattern5

See the Pen ebvmyg by Jiwon Son (@jiwonson) on CodePen.

Sample : Background Pattern6

See the Pen XoMJgp by Jiwon Son (@jiwonson) on CodePen.

Sample : Background JS1

See the Pen ebvmQW by Jiwon Son (@jiwonson) on CodePen.

Sample : Background JS2

See the Pen oJZXNQ by Jiwon Son (@jiwonson) on CodePen.

Background Random Iamges

See the Pen Random Background by Jiwon Son (@jiwonson) on CodePen.