background-image

background-image

background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.

---

background-image

background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.

특징	설명
기본 값	background-image : transparent
적용	background
버전	CSS1
사용성	★★★★★

정의(Definition)

• background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
• background-image 속성은 다중 이미지를 익스플로러9 이상부터 지원됩니다.

백그라운드와 관련된 속성(Background Related Properties)

• background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-color 속성은 백그라운드 색을 설정합니다.
• background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
• background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
• background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
• background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.

문법(Syntax)

background-image : url | none

/* 이미지 설정 */
background-image : url("../image.jpg");

/* 여러개 이미지 설정 */
background-image : url("../image1.jpg"), url("../image2.jpg");

/* 그라디언트 설정 */
background-image : linear-gradient();
background-image : radial-gradient();
background-image : repeating-linear-gradient();
background-image : repeating-radial-gradient();

속성(Property)

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

예제1(Sample)

버튼을 클릭하면 백그라운드 이미지가 변경되는 예제입니다.

background-image: url(images/img01.jpg); background-image: url(images/img02.jpg); background-image: url(images/img03.jpg);

HTML

CSS

SCRIPT

<div class="jsample">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.jsample {
    overflow: hidden;
}
.jsample > div {
    float: left;
    width: 18%;
    min-height: 150px;
    margin: 1%;
    background-image: url("https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover15.jpg");
    background-size: cover;
    border-radius: 5px;
}

// Javascript none

---

예제1(Sample)

linear-gradient(top, right, bottom, left)를 적용한 예제입니다.

gradient01

gradient02

gradient03

gradient04

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

예제2(Sample)

linear-gradient를(각도) 적용한 예제입니다.

gradient05

gradient06

gradient07

gradient08

.gradient05 {background-image: linear-gradient(0deg, #84fab0, #249092);}
.gradient06 {background-image: linear-gradient(90deg, #84fab0, #249092);}
.gradient07 {background-image: linear-gradient(180deg, #84fab0, #249092);}
.gradient08 {background-image: linear-gradient(260deg, #84fab0, #249092);}

예제3(Sample)

linear-gradient를(색상 추가) 적용한 예제입니다.

gradient09

gradient10

gradient11

gradient12

gradient13

gradient14

gradient15

gradient16

.gradient09 {background-image: linear-gradient(140deg, #fa709a, #fee140);}
.gradient10 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a);}
.gradient11 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0);}
.gradient12 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff);}
.gradient13 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2);}
.gradient14 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd);}
.gradient15 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd, #2575fc);}
.gradient16 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd, #2575fc, #72afd3);}

예제4(Sample)

linear-gradient를(위치 변경) 적용한 예제입니다.

gradient17

gradient18

gradient19

gradient20

gradient21

gradient22

gradient23

gradient24

.gradient17 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 20%, #453a94 100%);}
.gradient18 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 30%, #453a94 100%);}
.gradient19 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 40%, #453a94 100%);}
.gradient20 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 50%, #453a94 100%);}
.gradient21 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 60%, #453a94 100%);}
.gradient22 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 70%, #453a94 100%);}
.gradient23 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 80%, #453a94 100%);}
.gradient24 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 90%, #453a94 100%);}

예제5(Sample)

linear-gradient(경계선)를 적용한 예제입니다.

gradient25

gradient26

gradient27

gradient28

gradient29

gradient30

gradient31

gradient32

.gradient25 {background-image: linear-gradient(0deg, #c471f5 50%, #fa71cd 50%);}
.gradient26 {background-image: linear-gradient(30deg, #c471f5 50%, #fa71cd 50%);}
.gradient27 {background-image: linear-gradient(60deg, #c471f5 50%, #fa71cd 50%);}
.gradient28 {background-image: linear-gradient(90deg, #c471f5 50%, #fa71cd 50%);}
.gradient29 {background-image: linear-gradient(120deg, #c471f5 50%, #fa71cd 50%);}
.gradient30 {background-image: linear-gradient(150deg, #c471f5 50%, #fa71cd 50%);}
.gradient31 {background-image: linear-gradient(180deg, #c471f5 50%, #fa71cd 50%);}
.gradient32 {background-image: linear-gradient(210deg, #c471f5 50%, #fa71cd 50%);}

예제6(Sample)

linear-gradient(fixed)를 적용한 예제입니다.

gradient33

gradient34

gradient35

gradient36

gradient37

gradient38

gradient39

gradient40

.gradient33 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient34 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient35 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient36 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient37 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient38 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient39 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient40 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}

예제7(Sample)

radial-gradient(위치 변경)를 적용한 예제입니다.

gradient41

gradient42

gradient43

gradient44

gradient45

gradient46

gradient47

gradient48

.gradient41 {background: radial-gradient(#2a5298 0%, #209cff 20%, #68e0cf 100%);}
.gradient42 {background: radial-gradient(#2a5298 0%, #209cff 30%, #68e0cf 100%);}
.gradient43 {background: radial-gradient(#2a5298 0%, #209cff 40%, #68e0cf 100%);}
.gradient44 {background: radial-gradient(#2a5298 0%, #209cff 50%, #68e0cf 100%);}
.gradient45 {background: radial-gradient(#2a5298 0%, #209cff 60%, #68e0cf 100%);}
.gradient46 {background: radial-gradient(#2a5298 0%, #209cff 70%, #68e0cf 100%);}
.gradient47 {background: radial-gradient(#2a5298 0%, #209cff 80%, #68e0cf 100%);}
.gradient48 {background: radial-gradient(#2a5298 0%, #209cff 90%, #68e0cf 100%);}

예제8(Sample)

radial-gradient(방향)를 적용한 예제입니다.

gradient49

gradient50

gradient51

gradient52

gradient53

gradient54

gradient55

gradient56

.gradient49 {background: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
.gradient50 {background: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%);}
.gradient51 {background: radial-gradient(ellipse farthest-corner at right top, #f8bfa4 0%, #f33b4e 100%);}
.gradient52 {background: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b4e 100%);}
.gradient53 {background: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b4e 100%);}
.gradient54 {background: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
.gradient55 {background: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%);}
.gradient56 {background: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}

예제9(Sample)

radial-gradient(색상 추가)를 적용한 예제입니다.

gradient57

gradient58

gradient59

gradient60

gradient61

gradient62

gradient63

gradient64

.gradient57 {background-image: radial-gradient(#e14fad, #f9d423);}
.gradient58 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1);}
.gradient59 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8);}
.gradient60 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb);}
.gradient61 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da);}
.gradient62 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4);}
.gradient63 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4, #80deea);}
.gradient64 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4, #80deea, #cddc39);}

예제10(Sample)

repeating-linear-gradient를 적용한 예제입니다.

gradient61

gradient62

gradient63

gradient64

.gradient65 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient66 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient67 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient68 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 10px, #33691e 45px);}

예제11(Sample)

repeating-linear-gradient를 적용한 예제입니다.

gradient69

gradient70

gradient71

gradient72

.gradient69 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px);}
.gradient70 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px);}
.gradient71 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px);}
.gradient72 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 25px, #7cb342 45px);}

예제12(Sample)

repeating-radial-gradient를 적용한 예제입니다.

gradient73

gradient74

gradient75

gradient76

.gradient73 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 10px);}
.gradient74 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 15px);}
.gradient75 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 20px);}
.gradient76 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 25px);}

예제13(Sample)

repeating-radial-gradient를 적용한 예제입니다.

gradient77

gradient78

gradient79

gradient80

.gradient77 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient78 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient79 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient80 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}

---

실습1(Example)

repeating-radial-gradient를 이용한 예제입니다.

난 대꾸도 잊은채
환화게 웃는그녀를 잠시 멍하니 바라보았다.

HTML

CSS

SCRIPT

<div class="esample">
    <div>난 대꾸도 잊은채<br> 환화게 웃는그녀를 잠시 멍하니 바라보았다.</div>
</div>

@import url('https://webfontworld.github.io/iropke/IropkeBatang.css');
                    
.esample {
    height: 100%;
    background-image: repeating-linear-gradient(135deg, 
        #2b3284 0px, #2b3284 100px,
        #4177bc 100px, #4177bc 105px,
        #2b3284 105px, #2b3284 130px,
        #4177bc 130px, #4177bc 260px,
        #ffffff 260px, #ffffff 265px,
        #4177bc 265px, #4177bc 270px,
        #444caa 270px, #444caa 330px
    );
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: 'IropkeBatang';
    text-align: center;
}

// Javascript none

실습2(Example)

radial-gradient를 이용한 예제입니다.

난 대꾸도 잊은채
환화게 웃는그녀를 잠시 멍하니 바라보았다.

HTML

CSS

SCRIPT

<div class="esample2">
    <div>난 대꾸도 잊은채<br> 환화게 웃는그녀를 잠시 멍하니 바라보았다.</div>
</div>

@import url('https://webfontworld.github.io/iropke/IropkeBatang.css');

.esample2 {
    height: 100%;
    background:
        radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
        radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
        radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%),
        radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%),
        radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),
        radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
        radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
        radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
        radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
        radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
    background-color:#b03;
    background-size:100px 100px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: 'IropkeBatang';
    text-align: center;
}

// Javascript none

실습3(Example)

radial-gradient를 이용한 예제입니다.

난 대꾸도 잊은채
환화게 웃는그녀를 잠시 멍하니 바라보았다.

HTML

CSS

SCRIPT

<div class="esample3">
    <div>난 대꾸도 잊은채<br> 환화게 웃는그녀를 잠시 멍하니 바라보았다.</div>
</div>

@import url('https://webfontworld.github.io/iropke/IropkeBatang.css');

.esample3 {
    height: 100%;
    background:
        radial-gradient(black 15%, transparent 16%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: 'IropkeBatang';
    text-align: center;
}

// Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
background-image	○	○	○	○	○	○	○	○	○	○	○	○	○	○
linear-gradient	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○
radial-gradient	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○
repeating-linear-gradient	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○
repeating-radial-gradient	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C

---