Updated Aug 15, 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.
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.
Add a container element.
Add a text box, image element, or other elements inside your container.
Set the container width to 100%.
Add a background image.
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.
Add a container element with one column.
Set the container width to 100%.
Set the content width to 100%.
Add an image element inside the container and select your image.
Set the image width to 100%.
The image should now fill the width of the page and resize on smaller screens.