ConvertedU Marketing Library Webinar Blog

Need help? You've come to the right place

What's New Getting Started Drag and Drop Standard Builder Integrations Center

Background Images and Mobile Responsiveness (Drag & Drop)

In this article:

Background images

    Sizing

    Alignment

    Repeat options

    Adding a color overlay

    Best practices

Mobile responsiveness FAQs

You can adjust positioning options for background images to control how they appear on your page. Learn more about each option below.

Sizing

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. 

Alignment

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. 

Repeat

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. 

TIP: Regardless of which image settings you choose, you can increase your section or column’s padding values to add breathing room to any background image. 

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. Here’s how:

  1. Click the blue gear icon in the top-left corner of a section you’d like to add an image and overlay to. 
  2. Choose a background image, then configure its options using the settings as described above. 
  3. Click checkered circle next to Image Color Overlay, and choose a color. Note that you can adjust the opacity of the color to control how much of your image shows through. 

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:

  • 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. 

Mobile-Responsiveness FAQs

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 SmallMedium, 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 Working with Layout Settings and Styles for details.

 

(Updated 10/31/16)

Was this article helpful?
Powered by Zendesk