티스토리 뷰

CSS

[CSS] background-image

background-image

background-image 속성은 백그라운 색을 설정합니다.


background-image

background-image 속성은 백그라운 색을 설정합니다.

정의(Definition)

  • background-image 속성은 백그라운 색을 설정합니다.
  • background-image 속성 멀티 이미지는 익스플로러9 이상부터 지원됩니다.

문법(Syntax)

background-image : url | none

속성(Property)

속성값 설명
url background-image 주소를 설정합니다.
none background-image를 설정하지 않습니다.
linear-gradient 선형 그라데이션 백그라운를 설정합니다.
radial-gradient 원형 그라데이션 백그라운를 설정합니다.
repeating-linear-gradient 반복 선형 그라데이션 백그라운를 설정합니다.
repeating-radial-gradient 반복 원형 그라데이션 백그라운를 설정합니다.

Sample1

클릭하면 애니메이션의 cubic-bezier 효과를 보여주는 예제입니다.

결과
gradient01
gradient02
gradient03
gradient04
CSS
.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%);}

Sample2

백그라운드 이미지 효과 예제입니다.

결과
gradient05
gradient06
gradient07
gradient08
CSS
.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%);}

Sample3

백그라운드 이미지 효과 예제입니다.

결과
gradient09
gradient10
gradient11
gradient12
CSS
.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%);}

Sample4

백그라운드 이미지 효과 예제입니다.

결과
gradient13
gradient14
gradient15
gradient16
gradient17
gradient18
gradient19
gradient20
CSS
.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%);}

Sample5

백그라운드 이미지 효과 예제입니다.

결과
gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
CSS
.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);}

Sample6

백그라운드 이미지 효과 예제입니다.

결과
gradient29
gradient30
gradient31
gradient32
gradient33
gradient34
gradient35
gradient36
CSS
.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
CSS
.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%);}

Sample8

백그라운드 이미지 효과 예제입니다.

결과
gradient41
gradient42
gradient43
gradient44
CSS
.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%);}

Sample9

백그라운드 이미지 효과 예제입니다.

결과
gradient45
gradient46
gradient47
gradient48
gradient49
gradient50
gradient51
gradient52
CSS
.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;}

Sample10

백그라운드 이미지 효과 예제입니다.

결과
gradient60
gradient61
gradient62
gradient63
gradient64
gradient65
gradient66
gradient67
CSS
.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%);}

Sample11

백그라운드 이미지 효과 예제입니다.

결과
gradient68
gradient69
gradient70
gradient71
gradient72
gradient73
gradient74
gradient75
CSS
.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);}

Sample12

백그라운드 이미지 효과 예제입니다.

결과
gradient76
gradient77
gradient78
gradient79
CSS
.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%);}

Sample13

백그라운드 이미지 효과 예제입니다.

결과
gradient80
gradient81
gradient82
gradient83
gradient84
gradient85
gradient86
gradient87
CSS
.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%);}

Sample14

백그라운드 이미지 효과 예제입니다.

결과
gradient88
gradient89
gradient90
gradient91
gradient92
gradient93
gradient94
gradient95
CSS
.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;}

Sample15

백그라운드 이미지 효과 예제입니다.

결과
gradient100
gradient101
gradient102
gradient103
CSS
.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);}

Sample16

백그라운드 이미지 효과 예제입니다.

결과
gradient104
gradient105
gradient106
gradient107
CSS
.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);}

Sample17

백그라운드 이미지 효과 예제입니다.

결과
gradient100
gradient101
gradient102
gradient103
CSS
.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);}

Sample18

백그라운드 이미지 효과 예제입니다.

결과
gradient112
gradient113
gradient114
gradient115
CSS
.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);}

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
background-image 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
linear-gradient 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능
radial-gradient 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능
repeating-linear-gradient 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능
repeating-radial-gradient 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • CSS Animations

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼