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....)	반복 원형 그라데이션 백그라운를 설정합니다.

linear-gradient : to top, to left, to right, to bottom

.gradient01 {background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);}
.gradient02 {background-image: linear-gradient(to left, #a18cd1 0%, #fbc2eb 100%);}
.gradient03 {background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);}
.gradient04 {background-image: linear-gradient(to bottom, #a18cd1 0%, #fbc2eb 100%);}

linear-gradient : top, left, right, bottom

.gradient05 {background-image: -webkit-linear-gradient(top, #f6d365 0%, #fda085 100%);}
.gradient06 {background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 100%);}
.gradient07 {background-image: -webkit-linear-gradient(right, #f6d365 0%, #fda085 100%);}
.gradient08 {background-image: -webkit-linear-gradient(bottom, #f6d365 0%, #fda085 100%);}

linear-gradient : left top, right top, left bottom, right bottom

.gradient09 {background-image: -webkit-linear-gradient(left top, #84fab0 0%, #8fd3f4 100%);}
.gradient10 {background-image: -webkit-linear-gradient(right top, #84fab0 0%, #8fd3f4 100%);}
.gradient11 {background-image: -webkit-linear-gradient(left bottom, #84fab0 0%, #8fd3f4 100%);}
.gradient12 {background-image: -webkit-linear-gradient(right bottom, #84fab0 0%, #8fd3f4 100%);}

linear-gradient : deg

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

linear-gradient : color

.gradient21 {background-image: linear-gradient(140deg, #fa709a, #fee140);}
.gradient22 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a);}
.gradient23 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0);}
.gradient24 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff);}
.gradient25 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2);}
.gradient26 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd);}
.gradient27 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd, #2575fc);}
.gradient28 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd, #2575fc, #72afd3);}

linear-gradient : color position

.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%);}

linear-gradient : color position2

.gradient37 {background-image: linear-gradient(45deg, #c471f5 50%, #fa71cd 50%);}
.gradient38 {background-image: linear-gradient(90deg, #c471f5 50%, #fa71cd 50%);}
.gradient39 {background-image: linear-gradient(120deg, #c471f5 50%, #fa71cd 50%);}
.gradient40 {background-image: linear-gradient(160deg, #c471f5 50%, #fa71cd 50%);}

linear-gradient : color position3

.gradient41 {background-image: linear-gradient(90deg, #a5d6a7 50%, #81c784 50%);}
.gradient42 {background-image: linear-gradient(90deg, #a5d6a7 33.3333%, #81c784 33.3333% 66.6666%, #66bb6a 66.6666%);}
.gradient43 {background-image: linear-gradient(90deg, #a5d6a7 25%, #81c784 25% 50%, #66bb6a 50% 75%, #4caf50 75%);}
.gradient44 {background-image: linear-gradient(90deg, #a5d6a7 20%, #81c784 20% 40%, #66bb6a 40% 60%, #4caf50 60% 80%, #43a047 80%);}

linear-gradient : fixed

.gradient45 {background: linear-gradient(-20deg, #b721ff, #21d4fd) fixed;}
.gradient46 {background: linear-gradient(-20deg, #b721ff, #21d4fd) fixed;}
.gradient47 {background: linear-gradient(-20deg, #b721ff, #21d4fd) fixed;}
.gradient48 {background: linear-gradient(-20deg, #b721ff, #21d4fd) fixed;}
.gradient49 {background: linear-gradient(-20deg, #b721ff, #21d4fd) fixed;}
.gradient50 {background: linear-gradient(-20deg, #b721ff, #21d4fd) fixed;}
.gradient51 {background: linear-gradient(-20deg, #b721ff, #21d4fd) fixed;}
.gradient52 {background: linear-gradient(-20deg, #b721ff, #21d4fd) fixed;}

radial-gradient : position

.gradient60 {background-image: radial-gradient(#2a5298 0%, #209cff 20%, #68e0cf 100%);}
.gradient61 {background-image: radial-gradient(#2a5298 0%, #209cff 30%, #68e0cf 100%);}
.gradient62 {background-image: radial-gradient(#2a5298 0%, #209cff 40%, #68e0cf 100%);}
.gradient63 {background-image: radial-gradient(#2a5298 0%, #209cff 50%, #68e0cf 100%);}
.gradient64 {background-image: radial-gradient(#2a5298 0%, #209cff 60%, #68e0cf 100%);}
.gradient65 {background-image: radial-gradient(#2a5298 0%, #209cff 70%, #68e0cf 100%);}
.gradient66 {background-image: radial-gradient(#2a5298 0%, #209cff 80%, #68e0cf 100%);}
.gradient67 {background-image: radial-gradient(#2a5298 0%, #209cff 90%, #68e0cf 100%);}

radial-gradient : Color add

.gradient68 {background-image: radial-gradient(#e14fad, #f9d423);}
.gradient69 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1);}
.gradient70 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8);}
.gradient71 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb);}
.gradient72 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da);}
.gradient73 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4);}
.gradient74 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4, #80deea);}
.gradient75 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4, #80deea, #cddc39);}

radial-gradient : position

.gradient76 {background-image: radial-gradient(#e14fad 50%, #f48fb1 50%);}
.gradient77 {background-image: radial-gradient(#e14fad 33.3333%, #f48fb1 33.3333% 66.6666%, #f9d423 66.6666%);}
.gradient78 {background-image: radial-gradient(#e14fad 25%, #f48fb1 25% 50%, #f9d423 50% 75%, #ce93d8 75%);}
.gradient79 {background-image: radial-gradient(#e14fad 20%, #f48fb1 20% 40%, #f9d423 40% 60%, #ce93d8 60% 80%, #b39ddb 80%);}

radial-gradient : position

.gradient80 {background-image: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
.gradient81 {background-image: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%);}
.gradient82 {background-image: radial-gradient(ellipse farthest-corner at right top, #f8bfa4 0%, #f33b4e 100%);}
.gradient83 {background-image: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b4e 100%);}
.gradient84 {background-image: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b4e 100%);}
.gradient85 {background-image: radial-gradient(ellipse farthest-corner at bottom right, #f8bfa4 0%, #f33b4e 100%);}
.gradient86 {background-image: radial-gradient(ellipse farthest-corner at left center, #f8bfa4 0%, #f33b4e 100%);}
.gradient87 {background-image: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}

radial-gradient : fixed

.gradient88 {background: radial-gradient(#e14fad 0%, #f9d423 100%) fixed;}
.gradient89 {background: radial-gradient(#e14fad 0%, #f9d423 100%) fixed;}
.gradient90 {background: radial-gradient(#e14fad 0%, #f9d423 100%) fixed;}
.gradient91 {background: radial-gradient(#e14fad 0%, #f9d423 100%) fixed;}
.gradient92 {background: radial-gradient(#e14fad 0%, #f9d423 100%) fixed;}
.gradient93 {background: radial-gradient(#e14fad 0%, #f9d423 100%) fixed;}
.gradient94 {background: radial-gradient(#e14fad 0%, #f9d423 100%) fixed;}
.gradient95 {background: radial-gradient(#e14fad 0%, #f9d423 100%) fixed;}

repeating-linear-gradient

.gradient100 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient101 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient102 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient103 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 10px, #33691e 45px);}

repeating-linear-gradient

.gradient104 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px);}
.gradient105 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px);}
.gradient106 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px);}
.gradient107 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 25px, #7cb342 45px);}

repeating-radial-gradient

.gradient108 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 10px);}
.gradient109 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 15px);}
.gradient110 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 20px);}
.gradient111 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 25px);}

repeating-radial-gradient

.gradient112 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient113 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient114 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient115 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}

Sample

See the Pen Repeating-linear-gradient Background by webstory (@webstoryboys) on CodePen.

Sample

See the Pen Background by webstory (@webstoryboys) on CodePen.

Sample

See the Pen background by webstory (@webstoryboys) on CodePen.

마우스 움직임에 따라 변하는 백그라운드

See the Pen background Effect by webstory (@webstoryboys) on CodePen.

3초에 한번씩 바뀌는 백그라운드 컬러

See the Pen qzXgMm by webstory (@webstoryboys) on CodePen.

랜덤으로 변하는 그라디언드 백그라운드 컬러

See the Pen Random Gradient Background by webstory (@webstoryboys) on CodePen.

랜덤으로 변하는 백그라운드 이미지

unsplash API

See the Pen Random Image Background by webstory (@webstoryboys) on CodePen.