background-position
Sets background image position. bgpc (center) is most common. Adjust based on image focal point.
Class List
| Class | CSS | Description |
|---|---|---|
bgpc | background-position: center | Center aligned (most common) |
bgpt | background-position: top | Top aligned. Ideal for portraits |
bgpb | background-position: bottom | Bottom aligned |
bgpl | background-position: left | Left aligned |
bgpr | background-position: right | Right aligned |
bgptl | background-position: top left | Top left |
bgptr | background-position: top right | Top right |
bgpbl | background-position: bottom left | Bottom left |
bgpbr | background-position: bottom right | Bottom right |
Visual Diagram
Each cell is one element and the blue square marks where the background image is anchored. Compare at a glance how the nine values pin the image inside the box.
bgptl
bgpt
bgptr
bgpl
bgpc
bgpr
bgpbl
bgpb
bgpbr
Usage Examples
<!-- Center Background (Default Pattern) -->
<div class="bsc bgrn bgpc h40rem"></div>
<!-- Portrait photo — top focus -->
<div class="bsc bgrn bgpt h30rem br8px"></div>
<!-- Decorative image — bottom right placement -->
<div class="bsct bgrn bgpbr h20rem"></div>Class Details
bgpcbackground-position: center
The value you reach for most often. It centers the image in the box. A cover photo gets cropped evenly on all sides, so this suits images whose subject sits in the middle.
<!-- Subject in the middle: crop evenly on every side -->
<div class="bgpc bsc bgrn h30rem br8px"></div>bgptbackground-position: top
Pins the top of the image to the top of the box. It is the value that stops faces from being cropped in portraits, and it also suits banners whose sky or headline sits at the top.
<!-- Portrait: keep the face, crop the feet -->
<figure class="bgpt bsc bgrn h30rem w20rem br8px oh"></figure>bgpbbackground-position: bottom
Pins the bottom of the image to the bottom of the box. Use it for product shots where the ground line matters, or illustrations with shadows at the bottom.
<!-- Product shot: keep the ground line and the shadow -->
<div class="bgpb bsc bgrn h20rem br8px"></div>bgplbackground-position: left
Pins the left edge of the image to the left of the box. Handy for split banners where copy sits on the right and the photo must stay anchored left.
<!-- Split banner: photo pinned left, copy on the right -->
<section class="bgpl bsc bgrn h24rem br8px df jcfe aic p3-2rem">
<p class="fs2rem fw700 cFFFFFF w50p">Copy sits on the right half</p>
</section>bgprbackground-position: right
Pins the right edge of the image to the right of the box. Use it for heroes where the copy lives on the left and the artwork must be pushed right.
<!-- Hero: artwork pushed right, headline on the left -->
<section class="bgpr bsct bgrn h24rem br8px df aic p3-2rem">
<h2 class="fs3-2rem fw800 cFFFFFF w50p">Headline on the left</h2>
</section>bgptlbgptrbgpblbgpbrCorner values
Anchor the image tight into one of the four corners. Typical for decorative, non-repeating backgrounds such as a watermark in the bottom right of a card or a logo stamp in the top left.
<!-- Watermark stamped into the bottom right corner -->
<article class="bgpbr bgrn bsct p2rem bg18181B br8px">
<h3 class="fs2rem fw700 cFAFAFA mb8px">Invoice 2024-118</h3>
<p class="fs14px c71717A">The seal never repeats and never moves.</p>
</article>
<!-- Logo stamp in the top left -->
<div class="bgptl bgrn bsct p2rem bg18181B br8px">Branded panel</div>Practical Example — Profile Card and Watermark Card
A real pairing: the portrait is anchored to the top while the decorative pattern is anchored bottom right. The photo fills with cover, the ornament keeps its ratio with contain.
<div class="dg gtcr2-1fr gap2rem">
<!-- Portrait card: top anchored so the face survives the crop -->
<article class="bg18181B b1pxsolid27272A br8px oh">
<div class="bgpt bsc bgrn h20rem"></div>
<div class="p2rem">
<p class="fs16px fw600 cFAFAFA">Dana Whitfield</p>
<p class="fs14px c71717A">Design engineer</p>
</div>
</article>
<!-- Watermark card: ornament pinned bottom right, kept at natural ratio -->
<article class="bgpbr bgrn bsct bg18181B b1pxsolid27272A br8px p2rem">
<p class="fs12px ttu ls0-05em cA1A1AA mb8px">Receipt</p>
<p class="fs2-4rem fw700 cFAFAFA mb8px">USD 1,240.00</p>
<p class="fs14px c71717A">Paid on 12 March</p>
</article>
</div>Tips / Caveats
Without cover the difference barely shows
Position only matters when there is leftover space. If the image already fills the box exactly, every value renders the same.
Fixed attachment measures against the viewport
With background-attachment fixed, the position resolves against the viewport rather than the element, so an image you expected centered in a card ends up centered on the screen.
With repeat it only shifts the starting tile
If the background repeats, position merely moves where the tiling starts while the whole area stays covered. Turn repeat off to see the placement.
Decide which edge may be cropped first
Cover crops whatever overflows. A tall photo in a wide banner loses its top and bottom, which makes top or bottom the only meaningful choices there.
Use with cover
When filling with bsc, cropped area varies. Control focal point with position. bgpt (top) suits portraits.