background-image

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

특징	설명
기본 값	none
상속	안됨
애니메이션	안됨
버전	CSS1 + CSS3

Definition

• background-image 속성은 백그라운 이미지 속성을 설정합니다.
• 멀티 이미지는 CSS3에서 추가되었으며, 익스플로러9 이상부터 지원됩니다.

Syntax

background-image : url | none | inherit;

• background-image : none; (기본값)
• background-image: url(../img/img.jpg); (이미지 경로)

• background-image: linear-gradient(color, color);
• background-image: linear-gradient(degrees, color, color);
• background-image: radial-gradient(color, color);
• background-image: radial-gradient(circle, color, color);
• background-image: radial-gradient(circle, color 0%, color 20%, color 100%);
• background-image: radial-gradient(circle closest-side, color 0%, color 20%, color 100%);
• background-image: radial-gradient(circle closest-corner, color 0%, color 20%, color 100%);
• background-image: radial-gradient(circle farthest-side, color 0%, color 20%, color 100%);
• background-image: radial-gradient(circle farthest-corner, color 0%, color 20%, color 100%);
• background-image: radial-gradient(circle closest-side at 45px 45px, color 0%, color 20%, color 100%);

Property

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

Compatibility

						6	7	8	9	10	11

Sample

background-image

background-image : url(./img/img1.jpg);
background-image : url(./img/img2.jpg);
background-image : url(./img/img3.jpg);
background-image : url(./img/img.jpg), url(./img/img7.jpg);
background-image : url(./img/img4.jpg), url(./img/img6.jpg);
background-image : none;

Sample1 각 방향(to top, to left, to right, to bottom)에 따른 선형 그라디언트입니다.

gradient1

gradient2

gradient3

gradient4

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

Sample2 각 방향(top, left, right, bottom)에 따른 선형 그라디언트입니다.

gradient5

gradient6

gradient7

gradient8

• 현재는 -webkit을 사용해야 구현됩니다.
• .gradient1 {background-image:-webkit-linear-gradient(top, #ff0844, #ffb199);}
• .gradient2 {background-image:-webkit-linear-gradient(right, #ff0844, #ffb199);}
• .gradient3 {background-image:-webkit-linear-gradient(bottom, #ff0844, #ffb199);}
• .gradient4 {background-image:-webkit-linear-gradient(left, #ff0844, #ffb199);}

Sample3 각 방향(left top, right top, left bottom, right bottom)에 따른 선형 그라디언트입니다.

gradient9

gradient10

gradient11

gradient12

• .gradient9 {background-image:-webkit-linear-gradient(left top, #fa709a, #fee140);}
• .gradient10 {background-image:-webkit-linear-gradient(right top, #fa709a, #fee140);}
• .gradient11 {background-image:-webkit-linear-gradient(left bottom, #fa709a, #fee140);}
• .gradient12 {background-image:-webkit-linear-gradient(right bottom, #fa709a, #fee140);}

Sample4 각 방향(deg)에 따른 선형 그라디언트입니다.

gradient13

gradient14

gradient15

gradient16

• .gradient13 {background-image: linear-gradient(0deg, #2af598, #009efd);}
• .gradient14 {background-image: linear-gradient(40deg, #2af598, #009efd);}
• .gradient15 {background-image: linear-gradient(80deg, #2af598, #009efd);}
• .gradient16 {background-image: linear-gradient(120deg, #2af598, #009efd);}

Sample4 여러개의 색상을 추가하여 나타낸 선형 그라디언트입니다.

gradient17

gradient18

gradient19

gradient20

• .gradient17 {background-image: linear-gradient(140deg, #007adf, #00ecbc);}
• .gradient18 {background-image: linear-gradient(140deg, #007adf, #00ecbc, #e14fad);}
• .gradient19 {background-image: linear-gradient(140deg, #007adf, #00ecbc, #e14fad, #b224ef, #ff4e50);}
• .gradient20 {background-image: linear-gradient(140deg, #007adf, #00ecbc, #e14fad, #b224ef, #ff4e50, #fc00ff, #ff9a44);}

Sample5 여러개의 색상을 추가하여 나타낸 선형 그라디언트입니다.

background:-webkit-linear-gradient(left, #f28933, #f7fb0d);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6, #66fb69);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6, #66fb69, #4496e3);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6, #66fb69, #4496e3, #51b0dc);

Sample6 여러개의 색상을 추가하여 원하는 위치에 나타낸 선형 그라디언트입니다.

background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6 20%, #66fb69 25%, #4496e3 30%, #51b0dc);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6 30%, #66fb69 35%, #4496e3 40%, #51b0dc);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6 40%, #66fb69 45%, #4496e3 50%, #51b0dc);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6 50%, #66fb69 55%, #4496e3 60%, #51b0dc);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6 60%, #66fb69 65%, #4496e3 70%, #51b0dc);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6 70%, #66fb69 70%, #4496e3 80%, #51b0dc);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6 80%, #66fb69 85%, #4496e3 90%, #51b0dc);
background:-webkit-linear-gradient(left, #f28933, #f7fb0d, #92d3d6 90%, #66fb69 95%, #4496e3 100%, #51b0dc);

Sample7 원형 그라디언트입니다.

gradient21

gradient22

gradient23

gradient24

• .gradient21 {background-image: radial-gradient(#fc6076, #ff9a44);}
• .gradient22 {background-image: radial-gradient(#fc6076, #ff9a44, #fc00ff);}
• .gradient23 {background-image: radial-gradient(#fc6076, #ff9a44, #fc00ff, #00dbde);}
• .gradient24 {background-image: radial-gradient(#fc6076, #ff9a44, #fc00ff, #00dbde, #f5d100);}

Sample8 여러개의 색상을 추가하여 원하는 위치에 나타낸 원형 그라디언트입니다.

gradient25

gradient26

gradient27

gradient28

• .gradient25 {background-image:radial-gradient(#f9d423, #ff4e50 10%, #ff9a44, #f83600);}
• .gradient26 {background-image:radial-gradient(#f9d423, #ff4e50 30%, #ff9a44, #f83600);}
• .gradient27 {background-image:radial-gradient(#f9d423, #ff4e50 40%, #ff9a44, #f83600);}
• .gradient28 {background-image:radial-gradient(#f9d423, #ff4e50 50%, #ff9a44, #f83600);}

Sample9 ellipse farthest-corner을 이용한 원형 그라디언트입니다.

gradient30

gradient31

gradient32

gradient33

gradient34

gradient35

gradient36

gradient37

• .gradient21 {background-image: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
• .gradient22 {background-image: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%);}
• .gradient23 {background-image: radial-gradient(ellipse farthest-corner at right top, #f8bfa4 0%, #f33b4e 100%);}
• .gradient24 {background-image: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b4e 100%);;}
• .gradient21 {background-image: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b4e 100%);}
• .gradient22 {background-image: radial-gradient(ellipse farthest-corner at bottom right, #f8bfa4 0%, #f33b4e 100%);}
• .gradient23 {background-image: radial-gradient(ellipse farthest-corner at left center, #f8bfa4 0%, #f33b4e 100%)}
• .gradient24 {background-image: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}

Sample10 경계위치를 동일하게 하면 두줄 배경을 설정할 수 있습니다.

gradient40

gradient41

gradient42

gradient43

• .gradient41 {background-image: linear-gradient(0deg, #d61058 50%, #f49943 50%);}
• .gradient42 {background-image: linear-gradient(30deg, #d61058 50%, #f49943 50%);}
• .gradient43 {background-image: linear-gradient(100deg, #d61058 50%, #f49943 50%);}
• .gradient44 {background-image: linear-gradient(180deg, #d61058 50%, #f49943 50%);}

Sample11 반복 선형 그라디언트입니다.

gradient50

gradient51

gradient52

gradient53

• .gradient50 {background-image: repeating-linear-gradient(-45deg, #66a6ff 5px, #66a6ff 30px, #89f7fe 5px, #89f7fe 45px);}
• .gradient51 {background-image: repeating-linear-gradient(-45deg, #66a6ff 10px, #66a6ff 30px, #89f7fe 5px, #89f7fe 45px);}
• .gradient52 {background-image: repeating-linear-gradient(-45deg, #66a6ff 15px, #66a6ff 30px, #89f7fe 5px, #89f7fe 45px);}
• .gradient53 {background-image: repeating-linear-gradient(-45deg, #66a6ff 25px, #66a6ff 30px, #89f7fe 5px, #89f7fe 45px);}

Sample11 반복 선형 그라디언트입니다.

gradient55

gradient56

gradient57

gradient58

• .gradient55 {background-image: repeating-linear-gradient(-45deg, #cd9cf2 5px, #cd9cf2 30px, #f6f3ff 35px, #f6f3ff 45px);}
• .gradient56 {background-image: repeating-linear-gradient(-45deg, #cd9cf2 10px, #cd9cf2 30px, #f6f3ff 40px, #f6f3ff 45px);}
• .gradient57 {background-image: repeating-linear-gradient(-45deg, #cd9cf2 15px, #cd9cf2 30px, #f6f3ff 45px, #f6f3ff 45px);}
• .gradient58 {background-image: repeating-linear-gradient(-45deg, #cd9cf2 25px, #cd9cf2 30px, #f6f3ff 50px, #f6f3ff 45px);}

Sample12 반복 원형 그라디언트입니다.

gradient60

gradient61

gradient62

gradient63

• .gradient60 {background-image: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 5px, #fbc2eb 10px);}
• .gradient61 {background-image: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 5px, #fbc2eb 15px);}
• .gradient62 {background-image: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 5px, #fbc2eb 20px);}
• .gradient63 {background-image: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 5px, #fbc2eb 25px);}

Sample13 반복 원형 그라디언트입니다.

gradient65

gradient66

gradient67

gradient68

• .gradient65 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
• .gradient66 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
• .gradient67 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
• .gradient68 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}

Sample14 선형 픽스드 그라디언트입니다.

gradient70

gradient71

gradient72

gradient73

• .gradient70 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
• .gradient71 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
• .gradient72 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
• .gradient73 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}

Sample14 원형 픽스드 그라디언트입니다.

gradient74

gradient75

gradient76

gradient77

• .gradient74 {background: radial-gradient(#ff0844, #ffb199, #453a94) fixed;}
• .gradient75 {background: radial-gradient(#ff0844, #ffb199, #453a94) fixed;}
• .gradient76 {background: radial-gradient(#ff0844, #ffb199, #453a94) fixed;}
• .gradient77 {background: radial-gradient(#ff0844, #ffb199, #453a94) fixed;}

Example

• repeating-linear-gradient를 통해 만든 예제 보기 View

Share