Object

RepeatableImageFill

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

Properties

type
string
(Required)

Always repeatable_image for this object.

URL
uri
(Required)

The URL of the image file to use for filling the component.

Image URLs can begin with http://, https://, or bundle://. If the image URL begins with bundle://, the referenced image file must be in the same directory as the document.

Image file names should be properly encoded as URLs. For example, spaces in a URL should be encoded as %20.

See Guidelines for Using Images, Videos, and Audio Files.

attachment
string

A string that indicates how the fill should behave when a user scrolls.

Valid values:

  • scroll (default). The fill scrolls along with its component.

  • fixed. The fill stays at a fixed position within the viewport.

height
*

The height of the image as it is repeated. When height is omitted, the width property is used to determine the size based on the aspect ratio of the provided image.

horizontalAlignment
string

A string that sets the horizontal alignment of the image fill within its component.

Valid values:

  • left. Aligns the left edge of the fill with the left edge of the component.

  • center (default). Aligns the horizontal center of the fill with the center of the component.

  • right. Aligns the right edge of the fill with the right edge of the component.

repeat
string

A string that defines the direction in which the background image is repeated.

Valid values:

  • none. The background image is not repeated.

  • x. The image is repeated horizontally based on the original size of the image.

  • y. The image is repeated vertically based on the original size of the image.

  • both (default). The image is repeated horizontally and vertically based on the original size of the image.

verticalAlignment
string

The vertical alignment of the repeatable image fill within its component.

Valid values:

  • top. Aligns the top of the fill with the top edge of the component.

  • center (default). Aligns the vertical center of the fill with the center of the component.

  • bottom. Aligns the bottom of the fill with the bottom edge of the component.

This property has no effect when the repeat property is set to both or y.

width
*

The width of the image as it is repeated. When width is omitted, the height property is used to determine the size based on the aspect ratio of the provided image.

Discussion

Use the RepeatableImage fill type object to add a repeatable image on components.

Example

{ "components": [ { "role": "container", "layout": { "minimumHeight": 300 }, "style": { "fill": { "type": "repeatable_image", "URL": "bundle://myimage.jpg", "repeat": "x", "width": 30, "height": 30, "verticalAlignment": "center" } } } ]}

Relationships

Inherits From

See Also

Backgrounds for Components

Applying a Background to a Component

Change the appearance of the backgrounds in your article.

object ImageFill

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

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.