---
title: "Core — background"
canonical: https://sky-ui.cf.sky.com/core/system/background
---

# Core — background

Applying the `background` system modifier to your component will allow consumers of your component to pass in the following props:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `$bgColor` | [colors](/foundations/colours) | undefined | Applies a background color |
| `$bgGradient` | [gradients](/foundations/gradients) | undefined | Applies a background image gradient |
| `$bgImage` | string | undefined | Sets a background image URL or data source. |
| `$bgPosition` | string | undefined | Defines the position of the background image. |
| `$bgSize` | string | undefined | Specifies how the background image is sized. |
| `$bgAttachment` | string | undefined | Sets how the background image behaves when scrolling. |
| `$bgRepeat` | string | undefined | Defines if and how the background image repeats. |
| `$bgClip` | string | undefined | Specifies how the background extends within the element. |
| `$bgOrigin` | string | undefined | Determines the origin position of the background image. |
| `$bgBlendMode` | string | undefined | Defines how the background image blends with the element's background color. |