background-size
Controls how background images fill the container. bsc fills entirely (may crop), bsct shows full image (may letterbox). bsc used 90%+ of the time.
Class List
| Class | CSS | Description |
|---|---|---|
bsc | background-size: cover | Fills container completely (image may be cropped) |
bsct | background-size: contain | Shows entire image (margins may appear) |
Usage Examples
Use bsc with bgpc and bgrn for hero banners, card thumbnails, etc.
<!-- Hero banner -->
<div class="bsc bgrn bgpc h40rem">
<h1>Hero Title</h1>
</div>
<!-- Card thumbnail -->
<div class="bsc bgrn bgpc h20rem br8px"></div>
<!-- When you need to show the full image like a logo -->
<div class="bsct bgrn bgpc h10rem"></div>Tips
cover vs contain
bsc fills without gaps but may crop; bsct shows full image but may have empty space.
Essential combination
Standard: use bsc bgrn bgpc as a set for background images.