🎉 This article is written for our new form builder! If you are still using the old form builder, don't forget to make the switch by January 31, 2023.

Full-width images are a great way to add impact to your forms. This article covers two different methods for displaying images that take up the full width of the page, but these tips are helpful for anyone designing a Dubsado form!

🕒 The features shown in this article require legacy mode to be turned OFF. To learn more about legacy mode, click here.


In this article


Image with text or logo

Containers are perfect for displaying text on top of images. You can use this method to create a hero section, section heading, or banner on your form.

  1. Add a container element.

  2. Add a text box, image element, or other elements inside your container.

  3. Set the container width to 100%.

  4. Add a background image.

  5. Adjust the container padding to your liking. This will add space around your content and show more of the background image.

👋 Here’s a tip… consider adding a background color and lowering the background image opacity. This will blend the background image with the color, which could make your text easier to read!


Image only

If you aren’t planning on adding text or other form elements on top of your image, you’ll need to use an image element inside of a container. Empty containers do not appear on the client view of your form, even if they have a background.

  1. Add a container element with one column.

  2. Set the container width to 100%.

  3. Set the content width to 100%.

  4. Add an image element inside the container and select your image.

  5. Set the image width to 100%.

The image should now fill the width of the page and resize on smaller screens.

Did this answer your question?