Editing header background
Customize the color or image behind your header section where your names, logo, and navigation appear.
The header background is the color or image behind your site's header section (where your names, logo, and navigation live). Customizing it helps your header stand out and match your wedding style!
What is the header background?
The header background is the area behind:
- Your couple names or logo
- Navigation menu
- Any other header elements
It can be a solid color, gradient, image, or transparent!
Why customize it?
Match your theme. Coordinate with your wedding colors.
Create contrast. Make your names and navigation readable.
Add visual interest. A subtle pattern or color adds personality.
Brand consistency. Match your invitations or other wedding materials.
How to edit header background
- Go to Site in your main navigation
- Click the settings icon to open Site settings
- Click the Header tab at the top
- Scroll to the bottom to find Upload header background (1280px width)
- Upload your background image
- Choose the display mode: Cover, Contain, or Full width
- Set the Header background position to control alignment across devices
- Optionally check Overlay image with white text for better readability
- Click Save changes
Your header background updates!
Background options
Solid color: A single color (most common and clean)
Gradient: Blending from one color to another
Image: A photo or pattern behind the header
Transparent: No background, shows the page behind it
Choosing a background color
White or light: Classic, clean, works with most text colors
Dark: Dramatic, modern (use light-colored text)
Wedding colors: Match your actual wedding palette
Theme default: Stick with what your theme provides (often a safe choice!)
Using a background image
Want an image behind your header?
Subtle patterns work best: Textures, watercolors, soft florals
Low contrast: So text is still readable
Repeating patterns: Tile nicely without visible seams
Blurred photos: Soft-focus photos can work as backgrounds
Be careful: Too busy and your text becomes unreadable!
Ensuring readability
The most important thing: guests need to read your header text!
Light background = dark text
Dark background = light text
Busy background = add a semi-transparent overlay to improve contrast
Test readability on different devices!
Transparency and overlays
Some themes let you:
Make the header transparent: Shows the page content behind it
Add a color overlay: Put a semi-transparent color over a background image
Adjust opacity: Control how see-through the background is
These create sophisticated, layered looks!
Mobile considerations
Header backgrounds might look different on mobile:
Colors: Usually display the same
Images: Might crop or scale differently
Transparent headers: Might switch to solid on mobile for readability
Always test on a phone!
Tips for choosing backgrounds
Keep it simple. Clean backgrounds look more professional.
Consider navigation. Menu links need to be readable against the background.
Match your vibe. Formal wedding? Go elegant and minimal. Casual? Have fun with color!
Test combinations. Try your background with different text colors to see what works.
Don't fight your theme. Work with your theme's style, not against it.
Common combinations
White background + black text: Classic, always readable
Navy background + white text: Elegant and sophisticated
Blush pink background + dark gray text: Romantic and soft
Transparent background + white text (over dark hero image): Modern and sleek
Cream background + brown text: Rustic, vintage vibe
Updating your background
You can change it anytime! Maybe:
Start neutral, then add color as your wedding approaches
Match seasons (light and airy for spring/summer, richer tones for fall/winter)
Coordinate with new photos you add to your site
Header background vs. page background
Header background: Just the header area at the top
Page background: The entire page behind all your content
They're separate! You can have a colored header on a white page, or vice versa.
Removing a background image
If you added an image background but want to go back to a solid color:
- Go to Site settings → Header tab
- Click Delete above the background image preview
- Click Save changes
Fixed vs. scrolling header backgrounds
Some themes offer:
Fixed header: Stays at the top as you scroll (sticky)
Scrolling header: Scrolls away with the page
The background behavior usually matches the header behavior!
Accessibility
High contrast matters. Some guests might have vision difficulties. Make sure text is clearly visible!
Test in grayscale. Convert your site to black and white to check if contrast is sufficient.
Avoid red/green combinations. Difficult for colorblind guests.
Getting inspiration
Look at:
Your wedding invitations: Match the color scheme
Other wedding websites: See what you like
Your venue: Pull colors from your venue's aesthetic
Your theme's demos: See what the theme designer intended
When to keep it simple
Your header image is busy: A simple background lets it shine
Lots of navigation links: Too much visual competition confuses guests
Minimalist theme: Simple backgrounds match minimalist styles
Unsure what to do: White or your theme's default is always safe!
Your header background sets the tone for your entire site. Keep it readable, keep it beautiful!