[CSS] background

Background Reference

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

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

Sample2

gradient5

gradient6

gradient7

gradient8

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

Sample3

gradient9

gradient10

gradient11

gradient12

.gradient9 {background-image: -webkit-linear-gradient(left top, #fccb90 0%, #d57eeb 100%);}
.gradient10 {background-image: -webkit-linear-gradient(right top, #fccb90 0%, #d57eeb 100%);}
.gradient11 {background-image: -webkit-linear-gradient(left bottom, #fccb90 0%, #d57eeb 100%);}
.gradient12 {background-image: -webkit-linear-gradient(right bottom, #fccb90 0%, #d57eeb 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, #37ecba);}
.gradient23 {background-image: linear-gradient(140deg, #30cfd0, #330867, #37ecba, #72afd3);}
.gradient24 {background-image: linear-gradient(140deg, #30cfd0, #330867, #37ecba, #72afd3, #6a11cb);}
.gradient25 {background-image: linear-gradient(140deg, #30cfd0, #330867, #37ecba, #72afd3, #6a11cb, #2575fc);}
.gradient26 {background-image: linear-gradient(140deg, #30cfd0, #330867, #37ecba, #72afd3, #6a11cb, #2575fc, #48c6ef);}
.gradient27 {background-image: linear-gradient(140deg, #30cfd0, #330867, #37ecba, #72afd3, #6a11cb, #2575fc, #48c6ef, #005bea);}
.gradient28 {background-image: linear-gradient(140deg, #30cfd0, #330867, #37ecba, #72afd3, #6a11cb, #2575fc, #48c6ef, #005bea, #00c6fb);}

Sample6

gradient29

gradient30

gradient31

gradient32

gradient33

gradient34

gradient35

gradient36

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

Sample7

gradient37

gradient38

gradient39

gradient40

gradient41

gradient42

gradient43

gradient44

.bac2 > div {border-radius: 0;}
.gradient37 {background-image: radial-gradient(#f43b47, #fa709a);}
.gradient38 {background-image: radial-gradient(#f43b47, #fa709a, #74ebd5);}
.gradient39 {background-image: radial-gradient(#f43b47, #fa709a, #74ebd5, #9face6);}
.gradient40 {background-image: radial-gradient(#f43b47, #fa709a, #74ebd5, #9face6, #764ba2);}
.gradient41 {background-image: radial-gradient(#f43b47, #fa709a, #74ebd5, #9face6, #764ba2, #fa709a);}
.gradient42 {background-image: radial-gradient(#f43b47, #fa709a, #74ebd5, #9face6, #764ba2, #fa709a, #fee140);}
.gradient43 {background-image: radial-gradient(#f43b47, #fa709a, #74ebd5, #9face6, #764ba2, #fa709a, #fee140, #ffb199);}
.gradient44 {background-image: radial-gradient(#f43b47, #fa709a, #74ebd5, #9face6, #764ba2, #fa709a, #fee140, #ffb199, #ff0844);}

Sample8

gradient45

gradient46

gradient47

gradient48

gradient49

gradient50

gradient51

gradient52

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

Sample9

gradient53

gradient54

gradient55

gradient56

gradient57

gradient58

gradient59

gradient60

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

Sample10

gradient61

gradient62

gradient63

gradient64

gradient65

gradient66

gradient67

gradient68

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

Sample11

gradient69

gradient70

gradient71

gradient72

gradient73

gradient74

gradient75

gradient76

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

Sample12

gradient77

gradient78

gradient79

gradient80

gradient81

gradient82

gradient83

gradient84

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

Sample13

gradient85

gradient86

gradient87

gradient88

gradient89

gradient90

gradient91

gradient92

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

Sample14

gradient93

gradient94

gradient95

gradient96

gradient97

gradient98

gradient99

gradient100

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

Sample : Repeating-linear-gradient

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

Sample : Background-Pattern1

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

Sample : Background-Pattern2

See the Pen Background-pattern 2 by LeeSungHee (@drexqq) on CodePen.

Sample : Background-Pattern3

See the Pen Background-pattern 3 by LeeSungHee (@drexqq) on CodePen.

Background Effect1

See the Pen Section by LeeSungHee (@drexqq) on CodePen.

Background Effect2

See the Pen Background Effect2 by LeeSungHee (@drexqq) on CodePen.

Background Random Image

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