Adding backgrounds (images & video) to your Pages

Adding a background is an easy way to make your Page more engaging - whether you're opening with one or using it to break up existing content.

Adding a background

Click the Background icon (the circle next to the paintbrush) in the top-left corner of your Block to add a background.

Here, you have a choice: you can pick a single-color background or add an image or video instead.

Note: Qwilr has a mobile-responsive layout. This means that as your page is viewed on different screen sizes, the background image will change in width and re-crop automatically to fit. We recommend using a flexible background image.

Once you add an image or video background, you can customize its position using the Position setting below.

There are nine alignment options to help you get the perfect fit.

Background with an image

To set an image as a background, click the Background menu and select Image as the background type. Then, click Background Image. This will automatically open the library. You can click on a picture you want to apply as background or drag an image from the library into the Background Box. Alternatively, select the Upload button in the Background Box to choose a file from your device.

Background with a video

With videos, you can add some eye-catching movement to your pages.

To use a video as a background, click the Background menu and choose Video. Next, select Background video. The library will open automatically. You can either click on the a handful of sample videos you may want to apply as background or click the Embed button in the Background Box to add a video URL from either YouTube or Vimeo.

To use a video of your own, you'll first need to upload it to YouTube or Vimeo and set it as Public or Unlisted.

After clicking the Embed button, you will be prompted to insert either a link to the video hosted on the platforms, or the embed code:

What your client sees

Background videos are silent. Even if your video has an audio track, no sound will play in the Qwilr Page. If you need to have audio with your video, it's best to use a Video Block or inline video instead.

If your client views your page on a mobile device, they'll see the thumbnail image of the embedded video in place of the video. The reason we do this is that automatically streaming video consumes data. So, to avoid doing that on your clients' mobile devices, we replace the video with a static image.

Styling your Block with the background

To access styling options for your Block with the background, head to the top left corner and click the Style Library icon. Then, select the Customize tab.

You can change the image or video size by setting the block to 1/3 page, 1/2 page or full page.

You can place text over the image, or add an inline image that will superimpose over the background image. (It's a great way to add your logo.)

There are additional styling options if you head to the top left corner and click the Background menu icon.

Background tint: Add a semi-transparent layer over the background to improve readability.
Tint style: Select "Normal" for a standard overlay or "Blend" for a smoother integration with the background.
Tint opacity: Adjust the transparency of the tint using the slider (0 for none, 100 for full coverage).
Background blur: Blur the background image or video to allow the content on top of it to stand out more clearly.
Background card: Toggle this on to add a separate background behind text for better contrast.

File sizes, resolutions, and automatic cropping

The ideal aspect ratio for a background image is 16:9. An image sized at 1920 pixels wide by 1080 pixels high will display well on most standard desktop screens. However, keep in mind that this is designed as a flexible background element - images or videos in this block will automatically crop to fit smaller or mobile screens.

If it’s essential that your clients see the entire image or video regardless of screen size, consider using an inline image or a embedded video instead.

To ensure smooth background loading, background images should be under 3MB. If your image exceeds this size, you may need to compress it before uploading to Qwilr. For best quality, use an image with a resolution of 300 dpi that still falls within the 3MB limit to avoid pixelation.

Frequently Asked Questions

Q: Can I save my Block and reuse it across different Pages?

A: Yep! If you like your new block, save it so you can reuse it again.

In the top left corner of the Block, click the Block Options icon (3 dots). Next, click the blue Save Block icon. Give the block a title, and click Save. This will save your block in the Saved Block Library and you can add the block into other Qwilr pages.

Q: Why does my Block with video background not play on Mobile?

A: Blocks with video background are visually appealing, but can be complicated to deal with on mobile devices.

If your client views your page on a mobile device, they'll see a thumbnail image in place of the background video. There are two reasons for this. First, video uses data - so we wanted to avoid that. Secondly, there are some restrictions with YouTube that prevent background embeds on Mobile.

So to avoid any issues on your clients' mobile devices, we replace the video with a static image.

If you have admin access to the video on YouTube, you'll be able to set or change the thumbnail image via the video settings on YouTube's side.

Q: Can I change the background from image to video?

A: Yes you can! In the top left corner of your Block, click on the Background menu icon (circle).

From there, click on Background and choose the option you need:

Let us know if you have any questions or feedback by emailing help@qwilr.com.