[CSS] 기본 속성 - 배경

CSS background 속성

1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-attachment

 

 

1. background-color

- HTML 요소의 배경색 설정

body { background-color: lightblue; }
h1 { background-color: rgb(255,128,0); }
p { background-color: #FFFFCC; }

2. background-image

- HTML 요소의 배경 이미지 설정

- 전체에 걸쳐 수평과 수직 방향으로 반복되어 나타남

body { background-image: url("/examples/images/img_background_good.png"); }

3. background-repeat

- 배경 이미지를 수평이나 수직 방향으로만 반복되도록 or 한 번만 나타나도록 설정 가능

/* 수평 */
body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }
/* 수직 */
body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-y; }
/* 반복 X */
body { background-image: url("/examples/images/img_man.png"); background-repeat: no-repeat; }

4. background-position

- 반복되지 않는 배경 이미지의 상대 위치 설정

body {
	background-image: url("/examples/images/img_man.png");
	background-repeat: no-repeat;
	background-position: top right;
}

- 사용 가능 키워드 조합

1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom

 

- 퍼센트(%)나 픽셀(px)을 사용한 직접 명시 가능 => 기준 : 왼쪽 상단

 

5. background-attachment

- 배경 이미지의 위치 고정

- 스크롤과 무관하게 이동하지 않음

body {
	background-image: url("/examples/images/img_man.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-attachment: fixed;
}

 

 

background 속성 한 번에 적용하기

body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }

 

 

 

 

 

http://tcpschool.com/css/css_basic_backgrounds

코딩교육 티씨피스쿨