티스토리 뷰

CSS Reference

[CSS] Background | sohinggu๑°⌓°๑

댕발자 (●'-'●) 2019. 6. 28. 16:05

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
gradient02
gradient03
gradient04
.gradient01 {background-image: linear-gradient(to top, #e0c3fc 0%, #8ec5fc 100%);}
.gradient02 {background-image: linear-gradient(to left, #e0c3fc 0%, #8ec5fc 100%);}
.gradient03 {background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%);}
.gradient04 {background-image: linear-gradient(to bottom, #e0c3fc 0%, #8ec5fc 100%);}

linear-gradient : top, left, right, bottom

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

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

gradient09
gradient10
gradient11
gradient12
.gradient09 {background-image: -webkit-linear-gradient(left top, #96fbc4 0%, #f9f586 100%);}
.gradient10 {background-image: -webkit-linear-gradient(right top, #96fbc4 0%, #f9f586 100%);}
.gradient11 {background-image: -webkit-linear-gradient(left bottom, #96fbc4 0%, #f9f586 100%);}
.gradient12 {background-image: -webkit-linear-gradient(right bottom, #96fbc4 0%, #f9f586 100%);}

linear-gradient : deg

gradient13
gradient14
gradient15
gradient16
gradient17
gradient18
gradient19
gradient20
.gradient09 {background-image: -webkit-linear-gradient(left top, #96fbc4 0%, #f9f586 100%);}
.gradient10 {background-image: -webkit-linear-gradient(right top, #96fbc4 0%, #f9f586 100%);}
.gradient11 {background-image: -webkit-linear-gradient(left bottom, #96fbc4 0%, #f9f586 100%);}
.gradient12 {background-image: -webkit-linear-gradient(right bottom, #96fbc4 0%, #f9f586 100%);}

linear-gradient : color

gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
.gradient21 {background-image: linear-gradient(140deg, #2CD8D5, #C5C1FF);}
.gradient22 {background-image: linear-gradient(140deg, #2CD8D5, #C5C1FF, #FFBAC3);}
.gradient23 {background-image: linear-gradient(140deg, #2CD8D5, #C5C1FF, #FFBAC3, #9890e3);}
.gradient24 {background-image: linear-gradient(140deg, #2CD8D5, #C5C1FF, #FFBAC3, #9890e3, #b1f4cf);}
.gradient25 {background-image: linear-gradient(140deg, #2CD8D5, #C5C1FF, #FFBAC3, #9890e3, #b1f4cf, #4dd0e1 );}
.gradient26 {background-image: linear-gradient(140deg, #2CD8D5, #C5C1FF, #FFBAC3, #9890e3, #b1f4cf, #4dd0e1 , #64ffda);}
.gradient27 {background-image: linear-gradient(140deg, #2CD8D5, #C5C1FF, #FFBAC3, #9890e3, #b1f4cf, #4dd0e1 , #64ffda , #64ffda);}
.gradient28 {background-image: linear-gradient(140deg, #2CD8D5, #C5C1FF, #FFBAC3, #9890e3, #b1f4cf, #4dd0e1 , #64ffda , #64ffda, #ba68c8);}

linear-gradient : color position 1

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

linear-gradient : color position 2

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

linear-gradient : color position 3

gradient41
gradient42
gradient43
gradient44
.gradient41 {background-image: linear-gradient(90deg, #d7ccc8 50%, #a1887f 50%);}
.gradient42 {background-image: linear-gradient(90deg, #d7ccc8 33.3333%, #a1887f 33.3333% 66.6666%, #8d6e63 66.6666%);}
.gradient43 {background-image: linear-gradient(90deg, #d7ccc8 25%, #a1887f 25% 50%, #8d6e63 50% 75%, #795548 75%);}
.gradient44 {background-image: linear-gradient(90deg, #d7ccc8 20%, #a1887f 20% 40%, #8d6e63 40% 60%, #795548 60% 80%, #5d4037 80%);}

linear-gradient : color position 3

gradient45
gradient46
gradient47
gradient48
gradient49
gradient50
gradient51
gradient52
.gradient45 {background: linear-gradient(-20deg, #69EACB 0%, #fc00ff 100%) fixed;}
.gradient46 {background: linear-gradient(-20deg, #69EACB 0%, #fc00ff 100%) fixed;}
.gradient47 {background: linear-gradient(-20deg, #69EACB 0%, #fc00ff 100%) fixed;}
.gradient48 {background: linear-gradient(-20deg, #69EACB 0%, #fc00ff 100%) fixed;}
.gradient49 {background: linear-gradient(-20deg, #69EACB 0%, #fc00ff 100%) fixed;}
.gradient50 {background: linear-gradient(-20deg, #69EACB 0%, #fc00ff 100%) fixed;}
.gradient51 {background: linear-gradient(-20deg, #69EACB 0%, #fc00ff 100%) fixed;}
.gradient52 {background: linear-gradient(-20deg, #69EACB 0%, #fc00ff 100%) fixed;}

radial-gradient : color position 1

gradient60
gradient61
gradient62
gradient63
gradient64
gradient65
gradient66
gradient67
.gradient60 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 20%, #625EB1 100%);}
.gradient61 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 30%, #625EB1 100%);}
.gradient62 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 40%, #625EB1 100%);}
.gradient63 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 50%, #625EB1 100%);}
.gradient64 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 60%, #625EB1 100%);}
.gradient65 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 70%, #625EB1 100%);}
.gradient66 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 80%, #625EB1 100%);}
.gradient67 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 90%, #625EB1 100%);}

radial-gradient : color

gradient68
gradient69
gradient70
gradient71
gradient72
gradient73
gradient74
gradient75
.gradient60 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 20%, #625EB1 100%);}
.gradient61 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 30%, #625EB1 100%);}
.gradient62 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 40%, #625EB1 100%);}
.gradient63 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 50%, #625EB1 100%);}
.gradient64 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 60%, #625EB1 100%);}
.gradient65 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 70%, #625EB1 100%);}
.gradient66 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 80%, #625EB1 100%);}
.gradient67 {background-image: radial-gradient(#22E1FF 0%, #1D8FE1 90%, #625EB1 100%);}

radial-gradient : color positon 2

gradient76
gradient77
gradient78
gradient79
.gradient76 {background-image: radial-gradient(#feee7d 50%, #ef5285 50%);}
.gradient77 {background-image: radial-gradient(#feee7d 33.3333%, #ef5285 33.3333% 66.6666%, #60c5ba 66.6666%);}
.gradient78 {background-image: radial-gradient(#feee7d 25%, #ef5285 25% 50%, #60c5ba 50% 75%, #a5dff9 75%);}
.gradient79 {background-image: radial-gradient(#feee7d 20%, #ef5285 20% 40%, #60c5ba 40% 60%, #a5dff9 60% 80%, #6C49B8 80%);}

radial-gradient : color positon 2

gradient80
gradient81
gradient82
gradient83
gradient84
gradient85
gradient86
gradient87
.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 left bottom, #f8bfa4 0%, #f33b4e 100%);}

linear-gradient : fixed

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

repeating-liner-gradient 1

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

repeating-liner-gradient 2

gradient104
gradient105
gradient106
gradient107
.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 3

gradient108
gradient109
gradient110
gradient111
.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 3

gradient112
gradient113
gradient114
gradient115
.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 1

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


Sample 2

See the Pen Background by sohinggu (@sohinggu) on CodePen.


Sample 3

See the Pen Heart-Background by sohinggu (@sohinggu) on CodePen.


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

See the Pen Background Effect by sohinggu (@sohinggu) on CodePen.


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

See the Pen Background Effect 2 by sohinggu (@sohinggu) on CodePen.


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

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


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

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

UP NEXT : CSS Reference

댓글
© 2018 webstoryboy