background

배경 이미지의 크기, 반복, 위치, 고정, 클리핑 등을 제어하는 종합 속성입니다. bsc bgrn bgpc 조합은 이미지 배경의 기본 패턴이며, bgaf로 패럴랙스, bgct로 그라데이션 텍스트 효과를 구현할 수 있습니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`bgn`	background: none	배경을 완전히 제거
`bsc`	background-size: cover	비율 유지하며 요소를 꽉 채움 (잘릴 수 있음)
`bsct`	background-size: contain	비율 유지하며 이미지 전체 표시 (빈 공간 가능)
`bgrn`	background-repeat: no-repeat	이미지 반복 없음
`bgrr`	background-repeat: repeat	가로 세로 모두 반복 (기본값)
`bgrs`	background-repeat: space	이미지 반복, 간격 균등 배분
`bgrd`	background-repeat: round	이미지 반복, 크기 조절하여 빈틈 없이 채움
`bgpc`	background-position: center	이미지 중앙 정렬
`bgpt`	background-position: top	이미지 상단 정렬
`bgpb`	background-position: bottom	이미지 하단 정렬
`bgpl`	background-position: left	이미지 좌측 정렬
`bgpr`	background-position: right	이미지 우측 정렬
`bgaf`	background-attachment: fixed	배경을 뷰포트에 고정 (패럴랙스)
`bgas`	background-attachment: scroll	배경이 요소와 함께 스크롤 (기본값)
`bgal`	background-attachment: local	배경이 요소 콘텐츠와 함께 스크롤
`bgct`	background-clip: text	배경을 텍스트 모양으로 클리핑
`bgcbb`	background-clip: border-box	배경을 테두리까지 표시
`bgcpb`	background-clip: padding-box	배경을 패딩까지 표시
`bgccb`	background-clip: content-box	배경을 콘텐츠 영역만 표시

서브 속성 요약

background는 여러 서브 속성으로 구성됩니다. 각 속성의 역할과 대표 클래스를 정리합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">서브 속성	역할	대표 클래스
background-size	Image sizing (cover, contain)	`bsc, bsct`
background-repeat	Image repeat method	`bgrn, bgrr`
background-position	Image positioning	`bgpc, bgpt, bgpb`
background-attachment	Background fixed on scroll	`bgaf, bgas`
background-clip	Background painting area	`bgcbb, bgcpb, bgct`
background-origin	Background image origin area	`bgobb, bgopb, bgocb`

시각적 비교

각 background 관련 클래스가 이미지 배경에 어떤 영향을 주는지 비교합니다.

Cover — bsc bgrn bgpc

이미지가 요소를 완전히 채움. 비율 유지, 일부 잘림 가능

Contain — bsct bgrn bgpc

이미지 전체가 표시됨. 비율 유지, 빈 공간 발생 가능

Repeat — bgrr

이미지가 가로 세로로 반복됨 (패턴, 텍스처용)

Fixed (Parallax) — bgaf bsc bgrn bgpc

배경이 뷰포트에 고정되어 스크롤 시 패럴랙스 효과

이미지 배경 기본 패턴

bsc bgrn bgpc는 배경 이미지에 가장 많이 사용하는 3종 세트입니다. cover로 영역을 채우고, 반복 없이, 가운데 정렬합니다.

<!-- Image Background Default Pattern: cover + no-repeat + center -->
<div class="bsc bgrn bgpc h30rem"
     style="background-image: url('/hero.jpg')">
  <h1 class="cFFFFFF fs4rem fw800">Hero Banner</h1>
</div>

<!-- Card background image -->
<div class="bsc bgrn bgpc h20rem br8px oh"
     style="background-image: url('/card-bg.jpg')">
</div>

클래스별 상세

`bgn`background: none

배경을 완전히 제거합니다. 색상, 이미지, 그라데이션 등 모든 배경 요소를 초기화할 때 사용합니다.

<!-- Remove background -->
<div class="bgn">No background</div>

<!-- Remove background on hover -->
<button class="bg6366F1 hover-bgn">Background disappears on hover</button>

`bsc`background-size: cover

이미지를 비율을 유지하면서 요소 전체를 덮도록 확대합니다. 이미지 일부가 잘릴 수 있지만 빈 공간이 생기지 않습니다. 히어로 배너, 카드 배경에 필수입니다.

<!-- Hero banner (cover) -->
<section class="bsc bgrn bgpc h40rem df jcc aic"
         style="background-image: url('/hero.jpg')">
  <h1 class="cFFFFFF fs4-8rem fw800">Full Cover Hero</h1>
</section>

<!-- Card image (cover) -->
<div class="bsc bgrn bgpc h20rem br8px oh"
     style="background-image: url('/thumbnail.jpg')">
</div>

`bsct`background-size: contain

이미지 전체가 보이도록 축소합니다. 비율을 유지하므로 요소에 빈 공간이 생길 수 있습니다. 로고, 아이콘 등 전체가 보여야 하는 이미지에 적합합니다.

<!-- Logo Background (contain) -->
<div class="bsct bgrn bgpc h10rem"
     style="background-image: url('/logo.svg')">
</div>

<!-- Icon area -->
<div class="bsct bgrn bgpc w8rem h8rem"
     style="background-image: url('/icon.png')">
</div>

`bgrn`background-repeat: no-repeat

배경 이미지를 반복하지 않습니다. 사진, 일러스트 등 대부분의 배경 이미지에 기본으로 적용합니다.

<!-- Single image background (no repeat) -->
<div class="bgrn bgpc bsc h30rem"
     style="background-image: url('/photo.jpg')">
</div>

`bgrr`background-repeat: repeat

배경 이미지를 가로, 세로 모두 반복합니다. 패턴, 텍스처 이미지에 사용합니다. CSS 기본값이기도 합니다.

<!-- Pattern repeat background -->
<div class="bgrr h20rem"
     style="background-image: url('/pattern.png')">
</div>

<!-- Texture tile -->
<div class="bgrr p4rem br8px"
     style="background-image: url('/texture.svg')">
  <p class="cFFFFFF fs16px">Content over textured background</p>
</div>

`bgpc`background-position: center

배경 이미지를 요소 중앙에 배치합니다. bsc와 함께 사용하면 이미지의 중심부를 기준으로 크롭됩니다.

<!-- Center aligned Background -->
<div class="bgpc bsc bgrn h30rem"
     style="background-image: url('/photo.jpg')">
</div>

<!-- Top alignment (show face area in portrait photos) -->
<div class="bgpt bsc bgrn h20rem br8px"
     style="background-image: url('/portrait.jpg')">
</div>

위치 변형 클래스

`bgpt`	background-position: top — 상단 정렬
`bgpb`	background-position: bottom — 하단 정렬
`bgpl`	background-position: left — 좌측 정렬
`bgpr`	background-position: right — 우측 정렬
`bgptl`	background-position: top left — 좌상단
`bgptr`	background-position: top right — 우상단
`bgpbl`	background-position: bottom left — 좌하단
`bgpbr`	background-position: bottom right — 우하단

`bgaf`background-attachment: fixed

배경 이미지를 뷰포트에 고정시켜 스크롤해도 배경이 움직이지 않는 패럴랙스 효과를 만듭니다. 히어로 섹션이나 중간 배너에 사용합니다.

<!-- Parallax hero -->
<section class="bgaf bsc bgrn bgpc h50rem df jcc aic"
         style="background-image: url('/parallax-bg.jpg')">
  <h1 class="cFFFFFF fs4-8rem fw800">Parallax Section</h1>
</section>

<!-- Mid-section parallax banner -->
<div class="bgaf bsc bgrn bgpc h30rem"
     style="background-image: url('/banner.jpg')">
</div>

주의

모바일 Safari에서 background-attachment: fixed가 제대로 동작하지 않을 수 있습니다. 모바일 대응이 필요하면 JS 기반 패럴랙스를 고려하세요.

`bgas`background-attachment: scroll

배경 이미지가 요소와 함께 스크롤됩니다. CSS 기본값이며, bgaf를 해제하고 싶을 때 사용합니다.

<!-- Default scroll background (disable bgaf) -->
<div class="bgas bsc bgrn bgpc h30rem"
     style="background-image: url('/normal-bg.jpg')">
</div>

<!-- Responsive: parallax on desktop, scroll on mobile -->
<section class="bgaf sm-bgas bsc bgrn bgpc h40rem"
         style="background-image: url('/hero.jpg')">
</section>

`bgct`background-clip: text

배경을 텍스트 영역에만 클리핑하여 그라데이션 텍스트 효과를 만들 수 있습니다. 텍스트 색상을 투명으로 설정해야 배경이 보입니다.

<!-- Gradient text effect -->
<h1 class="bgct fs4-8rem fw800"
    style="background-image: linear-gradient(135deg, #667eea, #764ba2);
           -webkit-background-clip: text; color: transparent">
  Gradient Text
</h1>

<!-- Rainbow text -->
<span class="bgct fs3-6rem fw700"
      style="background-image: linear-gradient(90deg, #f093fb, #f5576c, #fda085);
             -webkit-background-clip: text; color: transparent">
  Rainbow Effect
</span>

그라데이션 텍스트 원리

배경에 그라데이션을 적용한 후 bgct로 텍스트 모양으로 잘라내고, 텍스트 색상을 투명하게 만들면 배경 그라데이션이 텍스트로 보이게 됩니다.

`bgcbbbgcpbbgccb`background-clip: border/padding/content-box

배경이 칠해지는 영역을 지정합니다. border-box는 테두리까지, padding-box는 패딩까지, content-box는 콘텐츠 영역만 배경을 표시합니다.

<!-- border-box: Background extends to border -->
<div class="bgcbb p2rem b8pxdashed6366F1 bg27272A">
  Background is shown under the border
</div>

<!-- padding-box: Background up to padding only -->
<div class="bgcpb p2rem b8pxdashed6366F1 bg27272A">
  Background is shown only inside the border (padding area)
</div>

<!-- content-box: Background in content area only -->
<div class="bgccb p2rem b8pxdashed6366F1 bg27272A">
  Background is shown only in the content area
</div>

`bgcbb`	border-box — 테두리 영역까지 배경 표시 (기본값)
`bgcpb`	padding-box — 패딩 영역까지만 배경 표시
`bgccb`	content-box — 콘텐츠 영역만 배경 표시

팁 & 주의사항

이미지 배경 기본 조합

bsc bgrn bgpc는 이미지 배경의 필수 3종 세트입니다. cover로 영역을 채우고, 반복 없이, 중앙 정렬합니다.

패럴랙스 효과

bgaf를 추가하면 스크롤 시 배경이 고정되는 패럴랙스 효과를 얻습니다. 단, 모바일 Safari에서 제한이 있으니 주의하세요.

그라데이션 텍스트

bgct로 background-clip: text를 적용하면 그라데이션 배경을 텍스트 모양으로 클리핑할 수 있습니다. 텍스트 색상을 투명하게 설정하는 것을 잊지 마세요.

cover vs contain

bsc(cover)는 빈 공간 없이 채우지만 이미지가 잘릴 수 있고, bsct(contain)는 전체가 보이지만 빈 공간이 생깁니다.

background-color background-size background-position background-blend-mode

background

클래스 목록

서브 속성 요약

시각적 비교

이미지 배경 기본 패턴

클래스별 상세

bgnbackground: none

bscbackground-size: cover

bsctbackground-size: contain

bgrnbackground-repeat: no-repeat

bgrrbackground-repeat: repeat

bgpcbackground-position: center

bgafbackground-attachment: fixed

bgasbackground-attachment: scroll

bgctbackground-clip: text

bgcbbbgcpbbgccbbackground-clip: border/padding/content-box