{"schemaVersion":"2.0.0","defaultLanguage":"en","languages":["en"],"launchScreenId":"article_screen_help-block-background","screens":{"article_screen_help-block-background":{"id":"article_screen_help-block-background","name":"Background — all settings","tags":["article"],"screenType":"FlexibleLayout","position":{"x":0,"y":0},"content":{"canvas":{"background":{"kind":"solid","content":{"color":"#F7F8FA"}},"insets":{"top":0,"end":0,"bottom":0,"start":0},"webViewBackgroundColor":"#F7F8FA"},"animated":false,"offlineFirst":true,"flexibleLayout":{"scrollable":true,"insets":{"top":44,"end":28,"bottom":56,"start":28},"sections":[{"id":"intro","order":0,"kind":"Text","label":"Intro","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Background — every setting"},"kind":"static","appearance":{"align":"start","fontSize":28,"fontWeight":800,"lineHeight":34,"color":"#101828"}},"subtitle":{"translations":{"en":"What fills the whole screen behind your content: a solid color, a photo, or a looping video. This guide documents every setting of the Background block, grouped by area. Each setting matches a real control in the screen editor."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":400,"lineHeight":26,"color":"#475467"}}}},{"id":"section-context","order":1,"kind":"Media","label":"Background in the editor","layout":{"heightKind":"fixed","heightValue":360,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/context-section.png","name":"The screen editor with the Background section highlighted."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"section-context-cap","order":2,"kind":"Text","label":"Context caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Open the Background section in the screen editor to configure its settings."},"kind":"static","appearance":{"align":"start","fontSize":13,"fontWeight":500,"lineHeight":19,"color":"#667085"}}}},{"id":"article-first-applies-to","order":3,"kind":"Text","label":"Applies to","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Applies to: Hero Content, Carousel, List Multi Pick, List Single Pick, Grid Multi Pick, Grid Single Pick, Text Input, Wheel Picker, Hero List, Web Embed, Paywall, and Flexible Layout screens."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":25,"color":"#344054"}}}},{"id":"g-fill-head","order":4,"kind":"Text","label":"Group: Background fill","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Background fill"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"g-fill-el","order":5,"kind":"Media","label":"Background fill in the section","layout":{"heightKind":"fixed","heightValue":270,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/open-section-fill.png","name":"Where the Background fill sits inside the open Background section."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-fill-el-cap","order":6,"kind":"Text","label":"Element caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Inside the Background section, this is the Background fill."},"kind":"static","appearance":{"align":"start","fontSize":13,"fontWeight":500,"lineHeight":19,"color":"#667085"}}}},{"id":"set-backdrop-kind","order":7,"kind":"Text","label":"Background fill · What Fills The Background","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"What Fills The Background"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Chooses what sits behind your content: a solid color, a photo, or a video clip, and reveals the matching control below. Defaults to a solid color. Use solid for clean question screens, a photo for emotive intro screens, and video only for short high-impact openers, since heavy video slows loading and can lose paid-ad visitors."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-backdrop-content-color","order":8,"kind":"Text","label":"Background fill · Solid Background Fill","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Solid Background Fill"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the single color behind the whole screen when the background is a solid color. Defaults to white. Match it to your theme and ad creative, and keep it high-contrast against your text and buttons so everything stays easy to read on a phone."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-backdrop-content-color-img","order":9,"kind":"Media","label":"Solid Background Fill","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/solid-color.png","name":"Where to find “Solid Background Fill” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-backdrop-content-image","order":10,"kind":"Text","label":"Background fill · Full-Screen Background Photo","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Full-Screen Background Photo"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Uploads an image that fills the screen background when the background is set to Photo. It scales to cover the whole screen, so edges can get cropped on different phone sizes, keep your focal point centered. If you put text on top, choose a darker or dimmed image so your copy stays readable."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-backdrop-content-image-img","order":11,"kind":"Media","label":"Full-Screen Background Photo","layout":{"heightKind":"fixed","heightValue":148,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/photo-image.png","name":"Where to find “Full-Screen Background Photo” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-backdrop-content-video","order":12,"kind":"Text","label":"Background fill · Full-Screen Background Video","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Full-Screen Background Video"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Uploads a short clip that fills the screen background when the background is set to Video Clip; it loops on its own. Keep it brief and lightweight, large videos slow the first load and can lose paid-ad visitors before they engage. Make sure any text over it stays readable across the looping frames."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-backdrop-content-video-img","order":13,"kind":"Media","label":"Full-Screen Background Video","layout":{"heightKind":"fixed","heightValue":148,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/clip-video.png","name":"Where to find “Full-Screen Background Video” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-chrome-head","order":14,"kind":"Text","label":"Group: Phone status & address bars","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Phone status & address bars"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"g-chrome-el","order":15,"kind":"Media","label":"Phone status & address bars in the section","layout":{"heightKind":"fixed","heightValue":270,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/open-section-chrome.png","name":"Where the Phone status & address bars sits inside the open Background section."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-chrome-el-cap","order":16,"kind":"Text","label":"Element caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Inside the Background section, this is the Phone status & address bars."},"kind":"static","appearance":{"align":"start","fontSize":13,"fontWeight":500,"lineHeight":19,"color":"#667085"}}}},{"id":"set-backdrop-webviewbackgroundcolor","order":17,"kind":"Text","label":"Phone status & address bars · Tint The Phone's Top Bar","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Tint The Phone's Top Bar"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the color of the surrounding system bars on web funnels, the strip at the top showing time and battery, and the bottom address bar. Leave it unset for almost every screen so it inherits your onboarding default. Set a color only when you want the phone's frame to blend into a full-bleed background for a seamless look."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}}]}}}},"metadata":{"kind":"article","alias":"help-block-background","articlePresentation":{"version":1,"profiles":{"standard":{"containerMaxWidth":640,"contentInsets":{"top":44,"end":28,"bottom":56,"start":28},"sectionPaddingScale":1,"textScale":1},"laptop":{"containerMaxWidth":620,"contentInsets":{"top":40,"end":28,"bottom":52,"start":28},"sectionPaddingScale":0.98,"textScale":0.98},"tablet":{"containerMaxWidth":560,"contentInsets":{"top":36,"end":24,"bottom":44,"start":24},"sectionPaddingScale":0.94,"textScale":0.95},"phone":{"containerMaxWidth":"100%","contentInsets":{"top":28,"end":16,"bottom":36,"start":16},"sectionPaddingScale":0.86,"textScale":0.9,"titleTextScale":0.86}}},"settingsMap":[{"fieldKey":"kind","title":"What Fills The Background","sectionType":"backdrop","group":"fill","guideKey":"screenedit-backdrop-type","editorTestId":"backdrop-kind-select","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/open-section-fill.png","articleSectionId":"set-backdrop-kind","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Background section.","postconditionTestId":"section-background"},{"to":"control","humanInstruction":"Find “What Fills The Background”.","postconditionTestId":"backdrop-kind-select"}]},{"fieldKey":"content.color","title":"Solid Background Fill","sectionType":"backdrop","group":"fill","guideKey":"screenedit-backdrop-solid-color","editorTestId":"backdrop-solid-color","revealState":"solid","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/solid-color.png","articleSectionId":"set-backdrop-content-color","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Background section.","postconditionTestId":"section-background"},{"to":"panel","humanInstruction":"Set the background type to Solid Color.","postconditionTestId":"backdrop-solid-color"},{"to":"control","humanInstruction":"Find “Solid Background Fill”.","postconditionTestId":"backdrop-solid-color"}]},{"fieldKey":"content.image","title":"Full-Screen Background Photo","sectionType":"backdrop","group":"fill","guideKey":"screenedit-backdrop-photo","editorTestId":"field-backdrop-image","revealState":"photo","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/photo-image.png","articleSectionId":"set-backdrop-content-image","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Background section.","postconditionTestId":"section-background"},{"to":"panel","humanInstruction":"Set the background type to Photo.","postconditionTestId":"field-backdrop-image"},{"to":"control","humanInstruction":"Find “Full-Screen Background Photo”.","postconditionTestId":"field-backdrop-image"}]},{"fieldKey":"content.video","title":"Full-Screen Background Video","sectionType":"backdrop","group":"fill","guideKey":"screenedit-backdrop-video","editorTestId":"field-backdrop-video","revealState":"clip","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/clip-video.png","articleSectionId":"set-backdrop-content-video","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Background section.","postconditionTestId":"section-background"},{"to":"panel","humanInstruction":"Set the background type to Video Clip.","postconditionTestId":"field-backdrop-video"},{"to":"control","humanInstruction":"Find “Full-Screen Background Video”.","postconditionTestId":"field-backdrop-video"}]},{"fieldKey":"webViewBackgroundColor","title":"Tint The Phone's Top Bar","sectionType":"backdrop","group":"chrome","guideKey":"screenedit-backdrop-browser-chrome-color","editorTestId":"backdrop-chrome-color","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/open-section-chrome.png","articleSectionId":"set-backdrop-webviewbackgroundcolor","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Background section.","postconditionTestId":"section-background"},{"to":"control","humanInstruction":"Find “Tint The Phone's Top Bar”.","postconditionTestId":"backdrop-chrome-color"}]}],"projectId":"arswew63RwQr6V4Ekb1Z","articleId":"help-block-background"},"webViewDefaultBackgroundColor":"#F7F8FA","projectAnalytics":{"consentManagement":{"enabled":true,"bannerText":"We use cookies to improve your experience and analyze site usage.","privacyPolicyUrl":"","defaultConsent":"denied"},"integrations":[{"platform":"segmently_internal","name":"Segmently Analytics","enabled":true,"config":{"mode":"http"},"createdAt":"2026-05-26T13:53:00.398Z","updatedAt":"2026-05-26T13:53:00.398Z","id":"int_mpmp3jsm_aij2kz"}]}}