background

background

:요소의 배경을 설정

 

속성 값

값	의미	요소	기본값
background-color	배경 색상		transparent
background-image	하나 이상의 배경 이미지	none, url("경로")	none
background-repeat	배경 이미지의 반복	repeat, repeat-x(수평), repeat-y(수직), no-repeat	repeat
background-position	배경 이미지의 위치	%, 방향(top, left, right, bottom), 단위	0 0
background-attachment	배경 이미지의 스크롤 여부(특성)		scroll

 

사용법

background : 색상 이미지경로 반복 위치 스크롤특성;

.box1 {
	background: red url("../img/image.jpg") no-repeat left top scroll;
    /* 색상 이미지경로 반복 위치 스크롤특성 */
}
.box2 {
	background: url("../img/image.jpg") no-repeat right 100px;
    /* 이미지경로 반복 위치 */
}
.box3 {
	background: red;
    /* 색상 */
}

 

background-position

/* 값이 방향인 경우 - 순서 바꿔도 됨 */
background-position: 방향1 방향2;

/* 값이 단위(%, px 등)일 경우 - 순서 바꾸면 안됨 */
background-position: X축 Y축;

 

background-attachment

 

요소

• scroll : 배경 이미지가 요소따라 같이 스크롤 됨
• fixed : 배경 이미지가 뷰포트에 고정되어 요소와 같이 스크롤 되지 않음
• local : 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

 

background-size

 

요소

• auto : 배경 이미지가 원래 크기로 표시됨
• 단위
  • px, em, % 등 단위로 지정 
  • width, height 형태로 입력 가능(E.g. 120px 370px)
  • width만 입력하면 비율에 맞게 지정됨(E.g. 120px)
• cover
  • 배경 이미지의 크기 비율을 유지하며 요소의 더 넓은 너비에 맞춰짐
  • 이미지가 잘릴 수 있음
• contain
  
  • 배경 이미지의 크기 비율을 유지하며 요소의 더 짧은 너비에 맞춰짐
  • 이미지가 잘리지 않음