Background Guide
This guide follows your live Background settings workflow, including the pattern option you use in this group.
Fast path: image (optional) -> fit/focus -> overlay -> opacity -> mobile fit/focus -> pattern.
Background Fields (Live Settings Order)
- Profile Background Image: image URL source (direct image URLs are safest).
- Background Quick Preset:
None, Clean, Cinematic, Soft, High Contrast. - Background Fit Mode:
Auto (Recommended), Cover, Contain, Tile, Stretch. - Background Focus Point: key image area for desktop cropping.
- Mobile Background Fit Mode: mobile-only fit behavior.
- Mobile Background Focus Point: mobile-only focal position.
- Mobile Background Attachment:
Auto (Recommended), Scroll, Fixed. - Background Overlay Strength:
0%-70%readability darkening. - Profile Background Opacity: tint opacity
100%-0%. - Profile Background Color: base tone behind your profile content.
- Profile Background Pattern: optional texture layer for style depth.
Background controls: set readability first, then style accents.
Setup Workflow
- Pick Quick Preset to get a stable baseline.
- Add image (optional), then set desktop fit/focus.
- Set overlay + opacity to protect readability.
- Tune mobile fit/focus/attachment for phone behavior.
- Add pattern only after readability is solid.
Mobile Fixes First
- If image is over-zoomed: change Mobile Background Fit Mode.
- If subject is cropped out: change Mobile Background Focus Point.
- If scrolling feels rough: set Mobile Background Attachment = Scroll.
Troubleshooting
- Unreadable text: raise overlay, then adjust background color opacity.
- Too dark: lower overlay first, then lower opacity.
- Desktop/mobile mismatch: tune fit/focus separately for each.
- Pattern looks noisy: reduce overlay changes and keep color contrast moderate.
- No visible image: verify URL is direct image link and saved.
Starter Recipes
Clean Readable
- Quick Preset: Clean
- Overlay: 30-50%
- Opacity: 70-90%
- Pattern: None or subtle
Cinematic
- Quick Preset: Cinematic
- Overlay: 50-70%
- Focus: Upper Center / Center
- Mobile fit: Auto or Contain
No-Image Styled Base
- Image: empty
- Background color: chosen theme base
- Opacity: 100%
- Pattern: Grid or Diamonds for texture
FAQs
What should I configure first in this section?
Set base colors/readability controls first, then style polish.
How many changes should I do per save?
One change at a time for reliable troubleshooting.
What should I verify after each change?
Readability, contrast, and interaction clarity on desktop and mobile.
When should I use advanced CSS?
After standard controls are stable and only for targeted overrides.
How do I avoid visual clutter?
Keep one dominant accent and reduce competing effects.
What is the fastest rollback?
Revert the last change first and retest before further edits.
