How To Add A Background Image
Add a custom background image to your hosted landing page to create a visually striking giveaway experience. A well-chosen background image can reinforce your brand, showcase your prizes, or set the mood for your contest.
Why Add a Background Image?
- Visual impact – Create a memorable first impression for participants
- Brand storytelling – Use imagery that reflects your brand’s personality
- Prize showcase – Feature your prizes or products in the background
- Seasonal themes – Match holidays, seasons, or special events
- Professional appearance – Elevate your giveaway beyond a simple white page
Note: The background image applies to hosted landing pages (sweepwidget.com/c/your-giveaway). If you embed the widget on your own website, your site’s background will be used instead.
How to Add a Background Image
Step 1: Go to Design Settings
- Create or edit a giveaway
- Click on the Design tab in the left sidebar
- Find the Add a background image or color to your landing page section
Step 2: Select the Image Option
You’ll see two options:
- Image – Upload a background image
- Color – Set a solid background color
Select Image to enable the background image option.
Step 3: Upload Your Image
- Click the + Choose button
- Select an image file from your computer
- The image will appear as a preview thumbnail
To remove the image, click the X button on the thumbnail.
Step 4: Save Your Changes
Click Save & Publish to apply the background image to your giveaway.
What Participants See
On your hosted landing page, the background image fills the entire page behind the giveaway widget. The widget itself remains on a white (or styled) background, creating a layered visual effect.
Image Specifications
Recommended Settings
| Specification | Recommendation |
|---|---|
| Minimum dimensions | 1200 x 900 pixels |
| Optimal dimensions | 1920 x 1080 pixels (full HD) |
| File format | JPG (photos) or PNG (graphics) |
| File size | Under 2MB for fast loading |
| Aspect ratio | Landscape orientation works best |
How the Image Displays
The background image is set to cover the entire page, meaning:
- The image scales to fill the browser window
- Parts of the image may be cropped on different screen sizes
- The image is centered, so edges may be cut off on smaller screens
- The image does not repeat (no tiling)
Background Image vs. Background Color
| Option | Best For | Considerations |
|---|---|---|
| Image | Rich visuals, promotional campaigns, themed contests | Larger file size; may affect load time |
| Color | Clean designs, fast loading, brand colors | Solid color only; simpler appearance |
You can only choose one – either a background image OR a background color, not both.
Tips for Choosing Background Images
Content Considerations
- Avoid busy patterns – Complex images can distract from the widget
- Use subtle imagery – The background should enhance, not compete with your content
- Consider the center – The widget appears in the center, so keep important details toward the edges
- Test readability – Ensure any text on your widget remains easy to read
Image Types That Work Well
| Image Type | Example Use Case |
|---|---|
| Nature/landscapes | Travel giveaways, outdoor brands |
| Abstract patterns | Tech companies, modern brands |
| Product photos | E-commerce, product launches |
| Lifestyle imagery | Fashion, fitness, food brands |
| Seasonal themes | Holiday giveaways, special events |
| Branded graphics | Corporate campaigns, brand awareness |
Best Practices
- Optimize for web – Compress images to reduce file size without losing quality
- Test on multiple devices – Preview on desktop, tablet, and mobile
- Use high-quality images – Blurry or pixelated backgrounds look unprofessional
- Consider dark overlays – If using a busy image, you may want to darken it so the widget stands out
- Match your branding – Choose images that align with your brand’s visual identity
- Check loading speed – Large images can slow down page load times
Where to Find Background Images
If you don’t have your own images, consider these free stock photo resources:
- Unsplash – unsplash.com
- Pexels – pexels.com
- Pixabay – pixabay.com
Always check the license terms to ensure the image can be used for commercial purposes.
Combining with Other Design Features
Background images work well when combined with other design customizations:
- Custom logo – Add your brand logo above the widget
- Header image – Include a promotional image inside the widget
- Widget colors – Customize button colors and fonts to complement your background
- Custom CSS – Advanced users can add overlays or adjust image positioning