background

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

클래스 목록

클래스	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는 여러 서브 속성으로 구성됩니다. 각 속성의 역할과 대표 클래스를 정리합니다.

서브 속성	역할	대표 클래스
background-size	이미지 크기 조절 (cover, contain)	`bsc, bsct`
background-repeat	이미지 반복 방식	`bgrn, bgrr`
background-position	이미지 위치 지정	`bgpc, bgpt, bgpb`
background-attachment	스크롤 시 배경 고정 여부	`bgaf, bgas`
background-clip	배경이 칠해지는 영역	`bgcbb, bgcpb, bgct`
background-origin	배경 이미지 기준 영역	`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로 영역을 채우고, 반복 없이, 가운데 정렬합니다.

<!-- 이미지 배경 기본 패턴: cover + no-repeat + center -->
<div class="bsc bgrn bgpc h30rem"
     style="background-image: url('/hero.jpg')">
  <h1 class="cFFFFFF fs4rem fw800">히어로 배너</h1>
</div>

<!-- 카드 배경 이미지 -->
<div class="bsc bgrn bgpc h20rem br8px oh"
     style="background-image: url('/card-bg.jpg')">
</div>

클래스별 상세

`bgn`background: none

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

<!-- 배경 제거 -->
<div class="bgn">배경 없음</div>

<!-- 호버 시 배경 제거 -->
<button class="bg6366F1 hover-bgn">호버하면 배경 사라짐</button>

`bsc`background-size: cover

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

<!-- 히어로 배너 (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>

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

`bsct`background-size: contain

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

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

<!-- 아이콘 영역 -->
<div class="bsct bgrn bgpc w8rem h8rem"
     style="background-image: url('/icon.png')">
</div>

`bgrn`background-repeat: no-repeat

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

<!-- 단일 이미지 배경 (반복 없음) -->
<div class="bgrn bgpc bsc h30rem"
     style="background-image: url('/photo.jpg')">
</div>

`bgrr`background-repeat: repeat

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

<!-- 패턴 반복 배경 -->
<div class="bgrr h20rem"
     style="background-image: url('/pattern.png')">
</div>

<!-- 텍스처 타일 -->
<div class="bgrr p4rem br8px"
     style="background-image: url('/texture.svg')">
  <p class="cFFFFFF fs16px">텍스처 배경 위의 콘텐츠</p>
</div>

`bgpc`background-position: center

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

<!-- 중앙 정렬 배경 -->
<div class="bgpc bsc bgrn h30rem"
     style="background-image: url('/photo.jpg')">
</div>

<!-- 상단 정렬 (인물 사진에서 얼굴 부분 표시) -->
<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

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

<!-- 패럴랙스 히어로 -->
<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>

<!-- 중간 패럴랙스 배너 -->
<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를 해제하고 싶을 때 사용합니다.

<!-- 기본 스크롤 배경 (bgaf 해제) -->
<div class="bgas bsc bgrn bgpc h30rem"
     style="background-image: url('/normal-bg.jpg')">
</div>

<!-- 반응형: 데스크탑은 패럴랙스, 모바일은 스크롤 -->
<section class="bgaf sm-bgas bsc bgrn bgpc h40rem"
         style="background-image: url('/hero.jpg')">
</section>

`bgct`background-clip: text

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

<!-- 그라데이션 텍스트 효과 -->
<h1 class="bgct fs4-8rem fw800"
    style="background-image: linear-gradient(135deg, #667eea, #764ba2);
           -webkit-background-clip: text; color: transparent">
  Gradient Text
</h1>

<!-- 무지개 텍스트 -->
<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: 테두리까지 배경 -->
<div class="bgcbb p2rem b8pxdashed6366F1 bg27272A">
  배경이 테두리 아래까지 표시됩니다
</div>

<!-- padding-box: 패딩까지만 배경 -->
<div class="bgcpb p2rem b8pxdashed6366F1 bg27272A">
  배경이 테두리 안쪽(패딩)까지만 표시됩니다
</div>

<!-- content-box: 콘텐츠 영역만 배경 -->
<div class="bgccb p2rem b8pxdashed6366F1 bg27272A">
  배경이 콘텐츠 영역에만 표시됩니다
</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