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 |
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>Tips
Use with cover
When filling with bsc, cropped area varies. Control focal point with position. bgpt (top) suits portraits.