Article

Applying a Background to a Component

Change the appearance of the backgrounds in your article.

Overview

You can specify a background, or fill, to be applied on top of a componentʼs background color. The fill can be an image, a repeatable image, a linear gradient, or a video. For each of these options, you can set properties that determine how the background is displayed and how it behaves.

To set a background for a component, use the fill property in the ComponentStyle object used by the component. Apple News Format lets you choose from these types of fills for your backgrounds:

  • ImageFill. Use an image as your background.

  • RepeatableImageFill. Use an image that can be repeated as your background.

  • VideoFill. Use a video that starts automatically as your background.

  • LinearGradientFill. Transition from one color at the top of the component to another color at the bottom. You can set the colors (and percentages) as well as the angle of the gradient fill. (An angle of 90 degrees transitions from left to right instead of top to bottom.)

See Also

Backgrounds for Components

object ImageFill

The object for adding an image background fill to a component.

object RepeatableImageFill

The object for adding a background image that can be repeated.

object VideoFill

The object for adding a video background fill to a component.

object LinearGradientFill

The object for displaying a linear gradient as a component background.

object GradientFill

The properties shared by all gradient fill types.

object Fill

The object for setting a fill type and attachment for a component’s background fill.

object ColorStop

The object for specifying the color and location for a color stop in a gradient.