When you add a background image to a page, it will automatically scale to fit devices of different sizes—or even differently-sized browser windows.
You can adjust positioning options for background images to control how they appear on your page. Learn more about each option below.
You can choose between three settings:
- Fill Container: This option will ensure your image always fills its containing section and maintain its aspect ratio—so it may be cropped or scaled on small devices.
- Fit to Container: Your full image will be displayed, even if it’s a different aspect ratio than its section, which may leave space on the sides.
- Auto: Our builder will automatically display your image based on its original size and aspect ratio.
Each option comes with compromises, and you may need to play around with the three settings to determine which one works best for specific scenarios. See an example below.
To resize the actual image you uploaded, we would recommend using an online resource like one of these listed below, then add the image to your page.
If you’re using the Fill Container or Auto sizing option, you may want to also adjust the vertical alignment of your image. You can choose between Top, Center, and Bottom alignment options, each of which will “pin” your image to the corresponding position of its container. For instance the Top option will force the top of a background image to match the top edge of its container. You can see each of these options in action below.
To make a background image repeat, select the repeat direction from the layout settings panel: Horizontally, Vertically, or Both. This works well with tile-able patterns and designs, like the icon background in our example “Master Your Camera” section here.
Adding a color overlay
Color overlays make it possible to make text on top of images more legible—or, create a unified image palette that reflects your brand by tinting your images. To add a color overlay, click the color picker next to Image Cover Overlay, then ADD next to "Page Colors" as seen below. Here’s how:
- Hover over the section where you'd like the background image, then click the pencil icon at the top-left corner of that section.
- Add the image of your choice for the background next to Image.
- Click the color picker next to Image Color Overlay, then ADD next to "Page Colors."
- Adjust your color and opacity.
To fully customize a section of your page for mobile devices, you can duplicate sections of your page to create device-specific sections. Navigate to a section’s style settings in the Page Layout tab, then open the Device Specific Display panel, where you can choose which devices to hide the section on. See Customizing Page Layout and Section Styles for details.
Best practices for background images
Because your image must change size with the screen size for mobile responsiveness, we recommend keeping some best practices in mind:
- In general, the recommended size for a background image is 1440 × 1100 pixels.
- Use background images that act more as an accent than a major call to action. Remember, the template has to take into account many different image viewing sizes, from a large screens to mobile phones.
- For a background image to work best on all devices, we recommend against using background photos containing important elements or information that must be viewed or that you'd like to be viewed across all devices. This might include calls to action or other special text and images.
Forgetting these points could cause distortion in your image if something such as text, a person, a face, or a monument is the focal point of the image.
Frequently asked questions
How does mobile responsiveness relate to layout stacking vs. sections?
In order to preserve legibility and look good on smaller screens, your page will adjust to only show one column at a time on mobile devices. So instead of seeing three columns laid out side by side, they will stack upon one another vertically (with the left-most column at the top), as shown below:
It’s important to note that the same is not true for most tablets—columns will still be displayed side-by-side. This is good to keep in mind if you have larger text in a multi-column layout, as it might look cramped on tablet devices.
What do small, medium, large options mean under page size?
The Small, Medium, and Large options under your page’s style settings control the maximum width your content will occupy. Each option sets a specific pixel width that your content will fill at a maximum—your content on smaller devices won’t take up these full widths.
- Small: 800 px
- Medium: 960 px
- Large: 1140 px
Images you upload for use in widgets shouldn’t exceed 1200 px. Any images larger than that won’t appear at their original size—they’ll simply add to your page’s total size and could slow down load times.
Can I hide sections on specific devices?
You can! Navigate to a section’s style settings, then open the Device Specific Display panel, where you can choose which devices to hide the section on. See Customizing Page Layout and Section Styles for details.
(Updated January 23, 2019)
Please let us know if you have additional questions.
You can always file a support ticket if you have additional questions by clicking the ? support button at the top-right corner of your account dashboard or by clicking here to file a support ticket.