# Adding a Fixed Image Fill Add an image that remains stationary when the user scrolls. ## Discussion The fixed image fill is one of the most captivating effects in Apple News Format. A fixed image fill stays still when the user scrolls. As long as any portion of the filled component is visible in the viewport, the image maintains one position, while the rest of the article seems to scroll independently of the image. **On this page, you’ll learn how to use the fixed image fill.**  ### Create a ComponentLayout Object for the Fixed Image Before you can make the image span the whole display area, you must create a new `ComponentLayout` object. 1. Copy the example code . 2. Paste the code between the closing brace (`}`) of the last `ComponentLayout` object and the closing brace for the whole `componentLayouts` property. Your code should look like the example code . #### fullScreenImageLayout: Copy This Code ```json , "fullScreenImageLayout": { "ignoreDocumentMargin": true, "minimumHeight": "100vmax", "margin": { "top": 24, "bottom": 12 } } ``` #### fullScreenImageLayout: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "componentLayouts": { ... "fullScreenImageLayout": { "ignoreDocumentMargin": true, "minimumHeight": "100vmax", "margin": { "top": 24, "bottom": 12 } } }, ... } ``` ### Create a ComponentTextStyle Object for the Pull Quote Create a new `ComponentTextStyle` object for a new color. 1. Copy the example code . 2. Paste the code between the closing brace (`}`) of the last `ComponentTextStyle` object and the closing brace for the whole `componentTextStyles` property. Your code should look like the example code . #### pullquoteLight: Copy This Code ```json , "pullquoteLight": { "textColor": "#F5F9FB" } ``` #### pullquoteLight: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "componentTextStyles": { ... "pullquoteLight": { "textColor": "#F5F9FB" } } ... } ``` ### Add a New Container with a Fixed Image Fill In , you downloaded a bundle called `News_Design_Tutorial_Advanced_Article_3` that contains a thumbnail image. Now, you’ll move that image into your working folder and use it as an image fill. 1. Move the `static-background.jpg` file from the `News_Design_Tutorial_Advanced_Article_3` folder to the folder that contains your working `article.json` file. 2. Copy the example code . 3. Paste the code inside your second section, near the end, before this code: `{ "role": tweet,` Your code should look like the example code . #### Fixed Image Fill: Copy This Code ```json { "role": "container", "layout": "fullScreenImageLayout", "style": { "fill": { "type": "image", "URL": "bundle://static-background.jpg", "fillMode": "cover", "attachment": "fixed", "verticalAlignment": "center", "horizontalAlignment": "center" } }, "components": [ { "role": "pullquote", "layout": "fullMarginBelowLayout", "textStyle": "pullquoteLight", "text": "“QUIA CONSEQUUNTUR MAGNI DOLORES EOS QUI RATIONE VOLUPTATEM SEQUI NESCIUNT.”", "anchor": { "targetAnchorPosition": "center" } } ] }, ``` #### Fixed Image Fill: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "components": [ ... { "role": "section", "layout": "fullBleedLayout", "style": "bodyBackgroundStyle", "components": [ ... { "role": "container", "layout": "fullScreenImageLayout", "style": { "fill": { "type": "image", "URL": "bundle://static-background.jpg", "fillMode": "cover", "attachment": "fixed", "verticalAlignment": "center", "horizontalAlignment": "center" } }, "components": [ { "role": "pullquote", "layout": "fullMarginBelowLayout", "textStyle": "pullquoteLight", "text": "“QUIA CONSEQUUNTUR MAGNI DOLORES EOS QUI RATIONE VOLUPTATEM SEQUI NESCIUNT.”", "anchor": { "targetAnchorPosition": "center" } } ] }, ... ] } ], ... } ``` ### Previous ### Next ## See Also [`object ImageFill`](/documentation/AppleNewsFormat/ImageFill) The object for adding an image background fill to a component. --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)