Background images
How to apply background images to various parts within your app, including whole pages.
Many parts within Appeggio can have an image set as the background. For example, an entire page can have a background image applied to it.
What are the Benefits of Using Background Images?
Used strategically, background images can:
Enhance Aesthetic Appeal
Enhances Visual Design: Background images can significantly enhance the visual appeal of a page (or part) by adding depth, texture, and color.
Brand Identity: They can reinforce brand identity through consistent use of images, colors, and styles that align with the brand's theme.
Increase User Engagement
Increased Engagement: Visually appealing background images can capture and retain user attention, encouraging them to explore the content more thoroughly.
Emotional Connection: Images can evoke emotions and create a connection with the audience, making the content more memorable and impactful.
Provide Context and Storytelling
Providing Context: Background images can provide context or set the scene for the content, making it easier for users to understand and relate to the information presented.
Storytelling: They can be used to tell a story or convey a message visually, complementing the textual content.
Highlight Content
Focus Areas: By using background images strategically, you can draw attention to specific areas or elements on the page, guiding the user’s focus.
Contrast and Readability: Properly designed background images can enhance readability by providing contrast and making text and other content stand out.
What Parts Can Have a Background Image Applied?
Many parts that help to lay out your app can have a background image applied, including rows, columns, containers, groups, panels, and pages.
Other specific parts that can have a background applied include artboards, drawers, navbars, footers, bottom navigation, menus, lists, tables, stats, accordions, collapses, joins, alerts, chats, carousels, and cards.
How Do I Tell By Looking at a Part if it Can Have a Background Image?
That's easy. When you select a part, if you see 'Image' in the right property editing panel, then you can apply a background image:
The background image will only occupy the space of the part it is in.
In the example below, there are two columns each containing some text. The first column has an image applied to the background. The image only takes up the space of the column. To provide more space around the text, and thereby increase the size of the image around the text, a vertical padding of 30 is applied. The same is done in the second column. Press play to watch the short video.
The Role of Opacity in the Use of Background Images
Whenever you apply a background image to a part, you must review the opacity of the image to ensure that any content in front of the image is clear.
The opacity of the image is set using the Decoration Editor in the right property panel for the part. For example, if I add a background image to a page, then the Decoration Editor for that page is where you go to adjust the opacity of the image.
Image opacity is applied using a slider, with values ranging from 0 to 1.
An opacity value of 0.1 means the image is almost completely transparent, and it is only slightly visible. An opacity value of 1 means the image is completely opaque, meaning that any content in front of the image may be difficult to see.
It's also important to know that if a background image is applied - any part in front of the image that has a color applied will not show the background image. The part may need to be made transparent in order to have the background image showing.
In the example below, a page has a background image applied. The navbar has a surface color applied so the navbar appears white. The navbar is made transparent so that the background image can be seen.
Related Information
Last updated
Was this helpful?
