코드랩 레퍼런스

background-position 본문

CSS

background-position

webstoryboy 2016. 6. 14. 00:06
background-position은 백그라운 이미지의 위치 영역을 설정합니다.
특징 설명
기본 값 0% 0%
상속 안됨
애니메이션 가능
버전 CSS1

Definition

  • background-position은 백그라운 이미지의 위치 영역을 설정합니다.

Syntax

background-position : left | center | right | bottom | top | percentage | length | inherit;
/* left, center, right, bottom, top을 설정한 경우 */
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;

/* percentage 설정한 경우 */
background-position: 10% 50%;

/* length을 설정한 경우 */
background-position: 0px 10px;

/* 다중 이미지를 사용할 경우 다중 포지션을 설정한 경우 */
background-position: 0px 10px, center top;

/* inherit을 설정한 경우 */
background-position: inherit;

Property

속성 값 설명
left 배경 이미지의 위치를 왼쪽으로 설정합니다.
center 배경 이미지의 위치를 가운데로 설정합니다.
right 배경 이미지의 위치를 오른쪽으로 설정합니다
bottom 배경 이미지의 위치를 밑으로 설정합니다
top 배경 이미지의 위치를 위로 설정합니다
percentage 배경 이미지의 위치를 퍼센트로 설정합니다
length 배경 이미지의 위치를 길이로 설정합니다
inherit background-position를 부모 요소로부터 속성을 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘

Sample

background-position













Ad

Comments