Image Area
A fixed area with a blurred background image effect
Preview
Welcome
Beautiful blurred background
Installation
This component automatically installs its dependency @croftcn/fixed-area.
Usage
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Child elements to display over the blurred background |
src | string | - | URL of the background image |
className | string | - | Additional CSS classes to apply to the FixedArea container |
How It Works
The component creates a layered effect:
- Background layer: Absolutely positioned, scaled (110%), heavily blurred (3xl), and semi-transparent (30%)
- Content layer: Uses
FixedAreato center content with padding
Features
- Blurred background image effect
- Scaled background for better edge coverage
- Centered content overlay
- Customizable opacity and blur
Example
Dependencies
@croftcn/fixed-area- Used for the centered content layer