background-position

background-position (배경 위치)

요소의 배경 이미지가 컨테이너 안 어디에 위치할지를 정하는 유틸리티예요. 위/아래/좌/우/가운데를 조합해 지정할 수 있어요.

출처: 문서

본문

ClassStyles

클래스	스타일
`bg-top-left`	`background-position: top left;`
`bg-top`	`background-position: top;`
`bg-top-right`	`background-position: top right;`
`bg-left`	`background-position: left;`
`bg-center`	`background-position: center;`
`bg-right`	`background-position: right;`
`bg-bottom-left`	`background-position: bottom left;`
`bg-bottom`	`background-position: bottom;`
`bg-bottom-right`	`background-position: bottom right;`
`bg-position-(<custom-property>)`	`background-position: var(<custom-property>);`
`bg-position-[<value>]`	`background-position: <value>;`

Examples

Basic example

bg-center, bg-right, bg-top-left 같은 유틸리티를 사용하면 요소의 배경 이미지 위치를 조절할 수 있어요.

이 예시들 위에 마우스를 올려 보면 전체 이미지를 볼 수 있어요.

<div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-top"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-center"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-right"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div>
<div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>

Using a custom value

완전히 커스텀한 값으로 배경 위치를 지정하고 싶다면 bg-position-[<value>] 문법을 사용해요.

<div class="bg-position-[center_top_1rem] ...">
  <!-- ... -->
</div>

CSS 변수로 지정하고 싶다면 bg-position-(<custom-property>) 문법도 사용할 수 있어요.

<div class="bg-position-(--my-bg-position) ...">
  <!-- ... -->
</div>

이것은 bg-position-[var(<custom-property>)]의 단축 표기로, var() 함수를 자동으로 넣어 주는 문법이에요.

Responsive design

background-position 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="bg-center md:bg-top ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

background-position