# <Background /> Component

## Description

A section for configuring the background properties of an object

## Checklist

This component should...

- Should render in the dom
- Should render an image tab
- Should render a color tab
- Should render a video tab
- Should render parallax settings
- Should hide the color properties when _color_ is found in the propertiesToHide array
- Should hide the color properties when _image_ is found in the propertiesToHide array
- Should hide the video properties when _video_ is found in the propertiesToHide array
- Should hide the parallax properties when _parallax_ is found in the propertiesToHide array
- Should trigger the onChange() event when the background changes in some way
- Should change the background color when the color is chosen in the color tools
- Should change the background image when one is chosen
- Should change the background repeat settings according to the option chosen (no-repeat, repeat-x, repeat-y, both)
- Should change the background positioning settings according to the option chosen (auto, cover, contain)
- Should change the background's parallax settings according to the parallax settings chosen
- Should change the background video when a video is chosen in the video tab
- Should trigger the _onBackgroundRender_ plugin hook when the Background component is rendering
- Should trigger the _onBackgroundChange_ plugin hook when the background changes in some way

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as Background from '@sandcastle/Components/Sections/Background`

export default () => (
  <Background

  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here