---
title: Adding a Fixed Image Fill
framework: applenews
role: article
role_heading: Article
path: applenews/adding-a-fixed-image-fill
---

# Adding a Fixed Image Fill

Add an image that remains stationary when the user scrolls.

## Overview

Overview 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. Copy the example code fullScreenImageLayout: Copy This Code. 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: Result. fullScreenImageLayout: Copy This Code ,     "fullScreenImageLayout": {       "ignoreDocumentMargin": true,       "minimumHeight": "100vmax",       "margin": {         "top": 24,         "bottom": 12       }     } fullScreenImageLayout: Result Ellipses (...) indicate lines of code that have been omitted from this example. {   ...   "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. Copy the example code pullquoteLight: Copy This Code. 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: Result. pullquoteLight: Copy This Code ,     "pullquoteLight": {       "textColor": "#F5F9FB"     } pullquoteLight: Result Ellipses (...) indicate lines of code that have been omitted from this example. {   ...   "componentTextStyles": {     ...     "pullquoteLight": {       "textColor": "#F5F9FB"     }   } ... } Add a New Container with a Fixed Image Fill In Download the Article Bundle Examples, 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. 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. Copy the example code Fixed Image Fill: Copy This Code. 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: Result. Fixed Image Fill: Copy This Code         {           "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. {   ...   "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 Creating a Sidebar Next Creating a Newsletter Sign-Up Element

## See Also

### Related Documentation

- [ImageFill](applenewsformat/imagefill.md)
- [Specifying Measurements for Components](applenews/specifying-measurements-for-components.md)

### Advanced Design Tutorial 3: More Ideas

- [Giving the Article a Dark Color Scheme](applenews/giving-the-article-a-dark-color-scheme.md)
- [Adding a Video](applenews/adding-a-video.md)
- [Creating a Sidebar](applenews/creating-a-sidebar.md)
- [Creating a Newsletter Sign-Up Element](applenews/creating-a-newsletter-sign-up-element.md)
- [Viewing the Finished Article for Advanced Design Tutorial 3](applenews/viewing-the-finished-article-for-advanced-design-tutorial-3.md)