--- title: "List Row Background | Explore SwiftUI" description: "Places a custom background view behind a list row item. Learn how to use List Row Background in SwiftUI with visual code examples." canonical_url: "https://exploreswiftui.com/library/list/list-row-background" meta: author: "Explore SwiftUI" "og:description": "Places a custom background view behind a list row item. Learn how to use List Row Background in SwiftUI with visual code examples." "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_List%2BRow%2BBackground%2Cdescription_Places%2Ba%2Bcustom%2Bbackground%2Bview%2Bbehind%2Ba%2Blist%2Brow%2Bitem.%2Ccategory_List%2Cimage_~L2FwaS9pbWFnZXMvMTIxL3ZhcmlhbnRzLzM0NT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L2xpc3QvbGlzdC1yb3ctYmFja2dyb3VuZCI%2Cs_jx8bO4UqjNLuYJuG.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "List Row Background | Explore SwiftUI" "twitter:description": "Places a custom background view behind a list row item. Learn how to use List Row Background in SwiftUI with visual code examples." "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_List%2BRow%2BBackground%2Cdescription_Places%2Ba%2Bcustom%2Bbackground%2Bview%2Bbehind%2Ba%2Blist%2Brow%2Bitem.%2Ccategory_List%2Cimage_~L2FwaS9pbWFnZXMvMTIxL3ZhcmlhbnRzLzM0NT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L2xpc3QvbGlzdC1yb3ctYmFja2dyb3VuZCI%2Cs_jx8bO4UqjNLuYJuG.png" "twitter:title": "List Row Background | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=121) # **List Row Background** Places a custom background view behind a list row item. ![List Row Background - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/121/variants/345?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 13.0+ iPadOS 13.0+ macOS 10.15+ watchOS 6.0+ tvOS 13.0+ visionOS 1.0+ ### **Tags** ### **SwiftUI Code** [ Docs]() ``` List { Section("Header") { Text("Foo") .listRowBackground(Color.accentColor) Text("Bar") } } ``` ### **Found an issue or have a suggestion?** Created: August 10, 2025Updated: August 10, 2025 ![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png) **Connect Wizard** **Unlock insights App Store Connect doesn’t show you.** [** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8) ### **More List Components ** [**View all **](https://exploreswiftui.com/library/list) ![Outline Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/132/variants/371?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Outline Group** A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data. ![Disclosure Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/131/variants/363?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Disclosure Group** A view that shows or hides another content view, based on the state of a disclosure control. ![Edit Button - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/130/variants/367?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Edit Button** A button that toggles the edit mode environment value. ![Section Index Label and Visibility - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/129/variants/369?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Section Index Label and Visibility** Sets the label that is used in a section index to point to this section, typically only a single character long. Changes the visibility of the list section index. ![Move Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/128/variants/361?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Move Disabled** Adds a condition for whether the view’s view hierarchy is movable. ![Delete Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/127/variants/351?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Delete Disabled** Adds a condition for whether the view’s view hierarchy is deletable. ![Refreshable List - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/126/variants/359?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Refreshable List** Marks this view as refreshable. ![Swipe Action - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/125/variants/357?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Swipe Action** Adds custom swipe actions to a row in a list. ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![TabsPickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/233/variants/182?v=1790073478842&r=2&w=412&q=75&f=webp) ### **TabsPickerStyle** A picker style that presents options as segmented tabs. On macOS, this style produces a segmented picker with a visual treatment that distinguishes tab navigation from value selection. On iOS, tvOS, and visionOS, the visual appearance matches that of the standard standard .segmented style. On all supported platforms, VoiceOver announces options as tabs. ![Content Unavailable Search Text - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/3/variants/10?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Content Unavailable Search Text** A pre-built placeholder for empty search results with search text ![ButtonToggleStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/210/variants/635?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ButtonToggleStyle** A toggle style that displays as a button with its label as the title. ![Materials - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/26/variants/169?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Materials** All materials ![Button Sizing - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/190/variants/3?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Button Sizing** The preferred sizing behavior of buttons in the view hierarchy. ![Menu Section - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/19/variants/416?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Menu Section** A Section inside a Menu ![Overlay Arrangement Edge - iOS on iPhone Duo - Landscape - Partially Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/251/variants/1787?v=1790586084694&r=2&w=412&q=75&f=webp) ### **Overlay Arrangement Edge** The horizontal edge a view in an overlay arrangement occupies when the arrangement transitions to a horizontal layout. In this case, the primary view overlays the secondary view at the trailing edge when the screen is partially open in landscape. ![Role Button With Default Label - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/134/variants/424?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Role Button With Default Label** Creates a button that displays a default label. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/list/list-row-background#webpage","@type":"WebPage","dateModified":"2025-08-10T15:57:33.474Z","datePublished":"2025-08-10T15:57:33.474Z","description":"Places a custom background view behind a list row item. Learn how to use List Row Background in SwiftUI with visual code examples.","name":"List Row Background","url":"https://exploreswiftui.com/library/list/list-row-background","breadcrumb":{"@id":"https://exploreswiftui.com/library/list/list-row-background#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/list/list-row-background"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/list/list-row-background#article","dateModified":"2025-08-10T15:57:33.474Z","datePublished":"2025-08-10T15:57:33.474Z","description":"Places a custom background view behind a list row item. Learn how to use List Row Background in SwiftUI with visual code examples.","headline":"List Row Background","inLanguage":"en-US","name":"List Row Background","thumbnailUrl":"https://exploreswiftui.com/api/images/121/variants/345?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/list/list-row-background","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/list/list-row-background#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/list/list-row-background#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/view/listrowbackground(_:)","codeSampleType":"full example","description":"Places a custom background view behind a list row item. Learn how to use List Row Background in SwiftUI with visual code examples.","name":"List Row Background SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"List {\n Section(\"Header\") {\n Text(\"Foo\")\n .listRowBackground(Color.accentColor)\n Text(\"Bar\")\n }\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"List"},{"@type":"Thing","name":"List Row Background"}]},{"@id":"https://exploreswiftui.com/library/list/list-row-background#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"List","item":"https://exploreswiftui.com/library/list","position":2},{"@type":"ListItem","name":"List Row Background","item":"https://exploreswiftui.com/library/list/list-row-background","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/121/variants/345?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/121/variants/345?v=1790073478842&r=2"}]} ```