background-image

background-image (배경 이미지·그라데이션)

요소에 배경 이미지를 넣고, 그라데이션(linear, radial, conic)과 색 스톱을 지정하는 유틸리티들이에요. 배경 이미지를 다룰 때 핵심이 되는 문서예요.

출처: 문서

본문

ClassStyles

Examples

Basic example

bg-[<value>] 문법을 사용하면 요소의 배경 이미지를 지정할 수 있어요.

<div class="bg-[url(/img/mountains.jpg)] ..."></div>

Adding a linear gradient

bg-linear-to-r이나 bg-linear-<angle> 같은 유틸리티를 색 스톱(color stop) 유틸리티와 함께 사용하면 요소에 선형 그라데이션을 추가할 수 있어요.

<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-linear-to-t from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-linear-65 from-purple-500 to-pink-500"></div>

Adding a radial gradient

bg-radial과 bg-radial-[<position>] 유틸리티를 색 스톱 유틸리티와 함께 사용하면 요소에 방사형 그라데이션을 추가할 수 있어요.

<div class="size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div>
<div class="size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%"></div>
<div class="size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

Adding a conic gradient

bg-conic과 bg-conic-<angle> 유틸리티를 색 스톱 유틸리티와 함께 사용하면 요소에 원뿔형 그라데이션을 추가할 수 있어요.

<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div>
<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>

Setting gradient color stops

from-indigo-500, via-purple-500, to-pink-500 같은 유틸리티를 사용하면 그라데이션 색 스톱의 색상을 지정할 수 있어요.

<div class="bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>

Setting gradient stop positions

from-10%, via-30%, to-90% 같은 유틸리티를 사용하면 그라데이션 색 스톱의 위치를 더 정밀하게 지정할 수 있어요.

<div class="bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>

Changing interpolation mode

인터폴레이션 수정자를 사용하면 그라데이션의 보간(interpolation) 방식을 조절할 수 있어요.

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/longer from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/shorter from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/increasing from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/decreasing from-indigo-500 to-teal-400"></div>

기본적으로 그라데이션은 oklab 색 공간에서 보간돼요.

Removing background images

bg-none 유틸리티를 사용하면 요소에 이미 적용된 배경 이미지를 제거할 수 있어요.

<div class="bg-none"></div>

Using a custom value

bg-linear-[<value>]이나 from-[<value>] 같은 유틸리티를 사용하면 그라데이션을 완전히 커스텀한 값으로 지정할 수 있어요.

<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] ...">
  <!-- ... -->
</div>

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

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

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

Responsive design

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

<div class="from-purple-400 md:from-yellow-500 ...">
  <!-- ... -->
</div>

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

Customizing your theme

--color-* 테마 변수를 사용하면 프로젝트에서 색상 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --color-regal-blue: #243c5a;
}

이제 마크업에서 from-regal-blue, via-regal-blue, to-regal-blue 같은 유틸리티를 사용할 수 있어요.

<div class="from-regal-blue">
  <!-- ... -->
</div>

테마를 커스터마이즈하는 방법에 대해 더 자세히 알고 싶다면 theme 문서를 참고해 주세요.

더 알아보기 (Learn more)