background
Comprehensive property controlling background image size, repeat, position, attachment, and clipping. bsc bgrn bgpc is the base pattern, bgaf for parallax, bgct for gradient text.
Class List
| Class | CSS | Description |
|---|---|---|
bgn | background: none | Completely removes background |
bsc | background-size: cover | Fills element maintaining ratio (may crop) |
bsct | background-size: contain | Shows full image maintaining ratio (may have space) |
bgrn | background-repeat: no-repeat | No image repeat |
bgrr | background-repeat: repeat | Repeats both directions (default) |
bgrs | background-repeat: space | Repeats with even spacing |
bgrd | background-repeat: round | Repeats, adjusts size for seamless fill |
bgpc | background-position: center | Image center aligned |
bgpt | background-position: top | Image top aligned |
bgpb | background-position: bottom | Image bottom aligned |
bgpl | background-position: left | Image left aligned |
bgpr | background-position: right | Image right aligned |
bgaf | background-attachment: fixed | Background fixed to viewport (parallax) |
bgas | background-attachment: scroll | Background scrolls with element (default) |
bgal | background-attachment: local | Background scrolls with element content |
bgct | background-clip: text | Clips background to text shape |
bgcbb | background-clip: border-box | Background extends to border |
bgcpb | background-clip: padding-box | Background extends to padding |
bgccb | background-clip: content-box | Background in content area only |
Sub-property Summary
background consists of multiple sub-properties. Each role and representative class summarized.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Sub-property | Role | Representative class |
|---|---|---|
| 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 |
Visual Comparison
Compares how each background class affects image backgrounds.
Cover — bsc bgrn bgpc
Image fills element. Ratio preserved, may crop
Contain — bsct bgrn bgpc
Full image displayed. Ratio preserved, may have space
Repeat — bgrr
Image repeats both directions (patterns, textures)
Fixed (Parallax) — bgaf bsc bgrn bgpc
Background fixed to viewport, parallax on scroll
Image Background Base Pattern
bsc bgrn bgpc is the most common 3-class set. Cover fills, no repeat, center aligned.
<!-- 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>Class Details
bgnbackground: none
Completely removes background. Resets color, image, gradient.
<!-- Remove background -->
<div class="bgn">No background</div>
<!-- Remove background on hover -->
<button class="bg6366F1 hover-bgn">Background disappears on hover</button>bscbackground-size: cover
Scales image to cover entire element. Parts may crop but no empty space. Essential for hero banners, card backgrounds.
<!-- 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>bsctbackground-size: contain
Scales to show entire image. May have empty space. Suitable for logos, icons.
<!-- 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>bgrnbackground-repeat: no-repeat
Disables background repeat. Default for photo/illustration backgrounds.
<!-- Single image background (no repeat) -->
<div class="bgrn bgpc bsc h30rem"
style="background-image: url('/photo.jpg')">
</div>bgrrbackground-repeat: repeat
Repeats in both directions. For patterns/textures. CSS default.
<!-- 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>bgpcbackground-position: center
Centers background image. With bsc, crops from center.
<!-- 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>Position variant classes
bgpt | background-position: top — top aligned |
bgpb | background-position: bottom — bottom aligned |
bgpl | background-position: left — left aligned |
bgpr | background-position: right — right aligned |
bgptl | background-position: top left |
bgptr | background-position: top right |
bgpbl | background-position: bottom left |
bgpbr | background-position: bottom right |
bgafbackground-attachment: fixed
Fixes background to viewport for parallax. Used in hero sections, mid-page banners.
<!-- 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>Caution
background-attachment: fixed may not work in mobile Safari. Consider JS parallax for mobile.
bgasbackground-attachment: scroll
Background scrolls with element. CSS default. Used to unset 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>bgctbackground-clip: text
Clips background to text area for gradient text. Text color must be transparent.
<!-- 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>Gradient text principle
Apply gradient, clip to text with bgct, make text transparent to show gradient as text.
bgcbbbgcpbbgccbbackground-clip: border/padding/content-box
Specifies background painting area. border-box to borders, padding-box to padding, content-box to content only.
<!-- 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 — background to border (default) |
bgcpb | padding-box — background to padding only |
bgccb | content-box — background to content only |
Tips & Notes
Image background base combination
bsc bgrn bgpc is the essential 3-class set. Cover fills, no repeat, center aligned.
Parallax effect
Add bgaf for fixed-background parallax on scroll. Limited on mobile Safari.
Gradient text
Apply background-clip: text with bgct to clip gradient to text shape. Set text color to transparent.
cover vs contain
bsc (cover) fills without gaps but may crop; bsct (contain) shows all but may have empty space.