Editing background image
Add or customize an image that appears behind all your website content like wallpaper.
Want to add an image behind your entire website (not just the header)? A background image can create a unique, immersive look for your wedding site!
What is a background image?
A background image appears behind all your page content. Unlike a header image (which is just at the top), the background image shows behind:
- All sections
- All text
- Your entire page
- Throughout your whole site
It's like wallpaper for your website!
Background image vs. header image
Header image: Shows only at the top of your page
Background image: Shows behind everything on your entire site
They're different! You can use both, one, or neither.
Why use a background image?
Unique aesthetic. Creates a distinctive look for your site.
Texture and depth. Adds visual interest without overwhelming content.
Match your theme. Enhance your wedding vibe (rustic, elegant, beachy, etc.).
Subtle branding. Very light patterns can add personality.
How to add a background image
- Go to Site > Builder
- Click Site settings
- Select the Design tab
- Scroll down to find Upload background image
- Upload your chosen image
- Configure display settings (size, position)
- Click Save
Your background image appears behind your content!
Choosing the right image
Subtle is key! Your content needs to be readable over the background.
Light or faded. Full-intensity photos are too distracting.
Patterns work great. Repeating textures, watercolors, or subtle designs.
Low contrast. Similar tones throughout so text doesn't disappear in some areas.
High resolution. Background images cover a lot of space, use high-quality files!
Good background image ideas
Textured paper: Linen, watercolor paper, aged parchment
Subtle patterns: Delicate florals, geometric shapes, dots
Watercolor washes: Soft, blended colors
Fabric textures: Lace, burlap, silk (photographed or illustrated)
Very faded photos: Your engagement photo at like 10% opacity
Minimal illustrations: Line drawings, botanical sketches
Bad background image ideas
Full-color photos: Too busy, text becomes unreadable
High-contrast patterns: Black and white stripes or checks are overwhelming
Detailed images: Complex scenes distract from your content
Dark images: Make light text hard to read
Anything that competes with your actual content!
Image display settings
Size:
- Cover: Fills the entire page
- Contain: Displays the whole image
- Full width: Adjusts to the page width
Position:
Choose which side to attach the background to when it is scaled across different devices. Options include top left, top, top right, left, center, right, bottom left, bottom, and bottom right.
Making images suitable for backgrounds
Reduce opacity. Make it semi-transparent (20-30% opacity works well)
Increase brightness. Lighten dark images so text shows up
Blur slightly. Reduces distraction from content
Add a white overlay. Semi-transparent white layer over the image
Use photo editing tools like Photoshop, Canva, or even built-in website settings!
Ensuring readability
Test your text! Make sure all your content is readable over the background.
Use content background colors. Put your actual content in white or solid-color boxes so text is always readable.
High contrast. Dark text needs a light area behind it, light text needs dark areas.
Check on mobile. Backgrounds might look different on phones.
Removing a background image
Don't like how it looks?
- Go to background image settings
- Find remove or delete option
- Save changes
Your site goes back to a solid background color!
Background color with background image
You can usually set both:
Background color: Shows if the image doesn't cover everything, or while the image loads
Background image: Shows over the color
Choose a background color that matches your image for a seamless look!
File size considerations
Background images can be large, which slows down your site!
Compress images: Use tools like TinyPNG to reduce file size
Optimize dimensions: You don't need a 5000px wide image for a background
Aim for under 500KB if possible
Fast loading matters!
Fixed vs. scrolling backgrounds
Fixed (parallax): Background stays put while content scrolls over it (cool effect!)
Scrolling: Background moves with the page (traditional)
Check if your theme supports parallax backgrounds!
Site-wide background
The background image applies to your entire website. It shows behind all your pages and sections.
Mobile considerations
Background images might not show on mobile to improve loading speed
Or they might crop differently on narrow screens
Test thoroughly to see how your theme handles backgrounds on phones
When to skip background images
Lots of photos on your site: Background images compete with your actual photos
Content-heavy site: Lots of text needs clean, distraction-free backgrounds
Your theme doesn't support it well: Some themes aren't designed for background images
You want fast loading: Background images add file size
Simple is better: Sometimes a solid color is cleaner and more elegant
Theme compatibility
Not all themes work well with background images! Some are designed for solid colors. Preview your site to see if a background image enhances or clutters your design.
Patterns vs. photos
Patterns: Usually work better! Repeating, subtle, don't distract
Photos: Harder to make work, need heavy fading/blurring
When in doubt, go with a pattern!
Getting background images
Create your own: Canva has background templates
Free resources: Subtle Patterns, Unsplash (search "texture")
Design marketplaces: Creative Market, Etsy
Make it yourself: Photograph a texture (paper, fabric, etc.) and lighten it
Background images can add a beautiful subtle touch to your site, but they require careful consideration to avoid overwhelming your content!