tessl/npm-primeflex
PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
image.mddocs/
Image Utilities
Image utilities provide control over background image properties including repeat patterns, sizing behavior, and positioning. These utilities are essential for managing background images in responsive designs.
Capabilities
Background Repeat
Control how background images repeat within their containers.
.bg-repeat { background-repeat: repeat; }
.bg-no-repeat { background-repeat: no-repeat; }
.bg-repeat-x { background-repeat: repeat-x; }
.bg-repeat-y { background-repeat: repeat-y; }
.bg-repeat-round { background-repeat: round; }
.bg-repeat-space { background-repeat: space; }Background Size
Control the sizing behavior of background images.
.bg-auto { background-size: auto; }
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }Background Position
Control the positioning of background images within their containers.
.bg-bottom { background-position: bottom; }
.bg-center { background-position: center; }
.bg-left { background-position: left; }
.bg-left-bottom { background-position: left bottom; }
.bg-left-top { background-position: left top; }
.bg-right { background-position: right; }
.bg-right-bottom { background-position: right bottom; }
.bg-right-top { background-position: right top; }
.bg-top { background-position: top; }Usage Examples
Hero Banner with Cover Image
<div class="h-screen bg-cover bg-center bg-no-repeat"
style="background-image: url('hero-background.jpg')">
<div class="flex align-items-center justify-content-center h-full">
<h1 class="text-white text-6xl font-bold">Welcome</h1>
</div>
</div>Card with Background Pattern
<div class="p-4 bg-repeat bg-top"
style="background-image: url('pattern.png')">
<h3 class="text-lg font-semibold">Card Title</h3>
<p class="text-color-secondary">Card content with background pattern</p>
</div>Image Gallery Thumbnails
<div class="grid">
<div class="col-3">
<div class="aspect-ratio-1x1 bg-cover bg-center border-round"
style="background-image: url('thumb1.jpg')">
</div>
</div>
<div class="col-3">
<div class="aspect-ratio-1x1 bg-contain bg-center bg-no-repeat border-round"
style="background-image: url('thumb2.jpg')">
</div>
</div>
</div>Decorative Elements
<!-- Repeating border pattern -->
<div class="border-top-1 bg-repeat-x bg-top"
style="background-image: url('border-pattern.svg')">
Content with decorative top border
</div>
<!-- Corner accent -->
<div class="relative p-4 bg-right-top bg-no-repeat"
style="background-image: url('corner-accent.svg')">
<h4>Card with corner decoration</h4>
<p>Content here</p>
</div>Usage Guidelines
Background Size:
bg-cover: Image covers entire container, may crop parts of imagebg-contain: Image fits entirely within container, may leave empty spacebg-auto: Image displays at its natural size
Background Repeat:
bg-no-repeat: Best for hero images and unique graphicsbg-repeat: Good for seamless patterns and texturesbg-repeat-x: Ideal for horizontal borders and dividersbg-repeat-y: Useful for vertical sidebar patternsbg-repeat-round: Scales image to avoid partial tilesbg-repeat-space: Distributes repeated images evenly
Background Position:
- Use specific positions (
bg-left-top,bg-right-bottom) for precise alignment bg-centeris most common for focal point images- Corner positions work well for decorative elements
Responsive Variants
All image utilities support responsive variants:
sm:bg-cover- Apply background sizing on small screens and upmd:bg-center- Apply background positioning on medium screens and uplg:bg-no-repeat- Apply background repeat on large screens and upxl:bg-contain- Apply background sizing on extra large screens and up
Install with Tessl CLI
npx tessl i tessl/npm-primeflex