Background
1. background-image
- 요소의 배경 이미지 지정
body {
background-image: url("http://image-server.com/my-image.png");
}
1
2
3
2
3
- 여러 개의 이미지를 설정할 수 있음 (먼저 설정된게 앞에 출력)
body {
background-image: url("http://image-server.com/my-image1.png") url("http://image-server.com/my-image2.png");
}
1
2
3
2
3
2. background-repeat
- background-image의 반복을 지정
- background-repeat: repeat (기본값)
- background-repeat: repeat-x (수평 반복)
- background-repeat: repeat-y (수직 반복)
- background-repeat: no-repeat (반복 안함)
- 이미지를 여러 개 설정했을 경우 속성 값도 마찬가지로 나열하여 설정할 수 있음
body {
background-image: url("http://image-server.com/my-image1.png") url("http://image-server.com/my-image2.png");
background-repeat: no-repeat, repeat;
}
1
2
3
4
2
3
4
3. background-size
- 배경 이미지의 사이즈를 지정
- px, %, cover, contain 등이 속성값으로 올 수 있음
- width, height를 지정할 수 있는데 둘 중 하나만 지정할 경우 나머지 하나는 auto로 지정됨
- background-size: (width) (height);
- background-size: cover (이미지의 비율을 유지한 상태에서 요소의 너비와 높이 중 큰 쪽에 이미지를 맞춤)
- background-size: contain (이미지의 비율을 유지한 상태에서 이미지가 잘리는 부분 없이 모두 보이는 쪽으로 맞춤)
/* Keyword values */
background-size: cover;
background-size: contain;
/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
4. background-attachment
- background-attachment: scroll (기본값으로 요소에 상대적인 위치이다)
- background-attachment: fixed (윈도우 창에 상대적인 위치. 스크롤을 내려도 이미지가 고정되어있음)
- background-attachment: local (잘 안씀. 요소의 내용에 상대적인 위치. overflow: auto; 처럼 자동스크롤이 생길 때 배경이미지는 고정되어있는데, local 속성을 쓰면 같이 스크롤됨)
/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
5. background-position
- 기준점은 박스 모델의 좌측 상단 모서리
- 기본값은 background-position: 0% 0%;
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* <percentage> values */
background-position: 25% 75%;
/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* Multiple images */
background-position: 0 0, center;
/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
6. background-color
- 색상값과 transparent를 지정할 수 있음
/* Keyword values */
background-color: red;
/* Hexadecimal value */
background-color: #bbff00;
/* Hexadecimal value with alpha channel */
background-color: #11ffee00; /* 00 - fully transparent */
background-color: #11ffeeff; /* ff - fully opaque */
/* RGB value */
background-color: rgb(255, 255, 128);
/* RGBA value or RGB with alpha channel */
background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */
/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
7. Shorthand
background: color || image || repeat || attachment || position
1