티스토리 뷰

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

호환성(Compatibility) 더보기

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

Sample

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

Sample

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

Sample

gradient9
gradient10
gradient11
gradient12
.gradient5 {background-image: -webkit-linear-gradient(top, #a18cd1 0%, #fbc2eb 100%);}
.gradient6 {background-image: -webkit-linear-gradient(left, #a18cd1 0%, #fbc2eb 100%);}
.gradient7 {background-image: -webkit-linear-gradient(right, #a18cd1 0%, #fbc2eb 100%);}
.gradient8 {background-image: -webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);}

Sample

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

Sample

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

Sample

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

Sample

gradient37
gradient38
gradient39
gradient40
gradient41
gradient42
gradient43
gradient44
.gradient37 {background-image: radial-gradient(#7028e4, #e5b2ca);}
.gradient38 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844);}
.gradient39 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343);}
.gradient40 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600);}
.gradient41 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600, #f9d423);}
.gradient42 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600, #f9d423, #d558c8);}
.gradient43 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600, #f9d423, #d558c8, #fbed96);}
.gradient44 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600, #f9d423, #d558c8, #fbed96, #ddd6f3);}

Sample

gradient45
gradient46
gradient47
gradient48
gradient49
gradient50
gradient51
gradient52
.gradient45 {background-image: radial-gradient(#2a5298 0%, #209cff 20%, #68e0cf 100%);}
.gradient46 {background-image: radial-gradient(#2a5298 0%, #209cff 30%, #68e0cf 100%);}
.gradient47 {background-image: radial-gradient(#2a5298 0%, #209cff 40%, #68e0cf 100%);}
.gradient48 {background-image: radial-gradient(#2a5298 0%, #209cff 50%, #68e0cf 100%);}
.gradient49 {background-image: radial-gradient(#2a5298 0%, #209cff 60%, #68e0cf 100%);}
.gradient50 {background-image: radial-gradient(#2a5298 0%, #209cff 70%, #68e0cf 100%);}
.gradient51 {background-image: radial-gradient(#2a5298 0%, #209cff 80%, #68e0cf 100%);}
.gradient52 {background-image: radial-gradient(#2a5298 0%, #209cff 90%, #68e0cf 100%);}

Sample

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

Sample

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

Sample

gradient69
gradient70
gradient71
gradient72
gradient73
gradient74
gradient75
gradient76
.gradient69 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px)}
.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, #7cb342 45px)}
.gradient74 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px)}
.gradient75 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px)}
.gradient76 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 15px, #7cb342 45px)}

Sample

gradient77
gradient78
gradient79
gradient80
gradient81
gradient82
gradient83
gradient84
.gradient69 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px)}
.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, #7cb342 45px)}
.gradient74 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px)}
.gradient75 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px)}
.gradient76 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 15px, #7cb342 45px)}

Sample

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

Sample

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

공유하기(Share) 더보기

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

공감하기(Like) 더보기

태그(Tag) 더보기

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