CSS background-position-y: 배경 이미지 세로축 위치

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

CSS background-position-y 속성은 요소 배경 이미지 각각의 세로축 위치를 설정합니다. 최종 위치는 background-origin이 설정한 위치 레이어에 상대적입니다.

#target {
  background-position-y: top;
  /* background-position-y: center; */
  /* background-position-y: bottom; */
  /* background-position-y: 25%; */
  /* background-position-y: 48px; */
}

#target {
  background-image: url(/assets/logo-small.svg);
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: 100px;
  border: 1px dashed black;
  height: 160px;
}

<div id="target"></div>

불러오는 중...

구문

/* 키워드 값 */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* <percentage> 값 */
background-position-y: 25%;

/* <length> 값 */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/* 배경 이미지 다수 위치 설정 */
background-position-y: 0px, center;

/* 전역 값 */
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;

background-position-y 속성에는 다음 값을 쉼표로 구분하여 한 개 이상 사용합니다.

값

top: 배경 이미지의 위쪽 모서리를 배경 위치 레이어의 위쪽 모서리에 맞춥니다.
bottom: 배경 이미지의 아래쪽 모서리를 배경 위치 레이어의 아래쪽 모서리에 맞춥니다.
center: 배경 이미지의 중앙을 배경 위치 레이어의 중앙에 맞춥니다.
<length>: 배경 이미지의 위쪽 모서리를 배경 위치 레이어의 위쪽 모서리에서 주어진 길이만큼 떨어진 곳에 맞춥니다.
<percentage>: 0%는 top, 100%는 bottom과 같습니다. 따라서 50%를 지정하면 중앙에 정렬됩니다.

명세

CSS Backgrounds Module Level 4

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS		Android
	Safari	Chrome	Firefox	Safari	Safari WebView	Chrome	Android WebView	Firefox	Samsung Internet
`background-position-y`
Side-relative values (such as `bottom 10%`)

같이 보기

가로축 위치: background-position-x