# Panel Background Settings

A set of inspector settings to modify the block's background

## Usage

```jsx
<PanelBackgroundSettings
	backgroundColor={backgroundColor}
	backgroundImageID={backgroundImageID}
	backgroundImageURL={backgroundImageURL}
	backgroundOpacity={backgroundOpacity}
	fixedBackground={fixedBackground}
	onChangeBackgroundColor={backgroundColor =>
		setAttributes({ backgroundColor })
	}
	onChangeBackgroundImage={({ url, id }) =>
		setAttributes({ backgroundImageURL: url, backgroundImageID: id })
	}
	onRemoveBackgroundImage={() => {
		setAttributes({ backgroundImageURL: "", backgroundImageID: 0 });
	}}
	onChangeBackgroundOpacity={backgroundOpacity =>
		setAttributes({ backgroundOpacity })
	}
	onChangeFixedBackground={value => setAttributes({ fixedBackground: !!value })}
/>
```

To implement the background settings to the block's main container:

- Add the class `gutenstrap-has-background` if there's a background color or background image
- Add the class `gutenstrap-has-background-image` if there a background image
- Add the class `gutenstrap-background-on-hover` to show background on hover
- Add the class `gutenstrap--has-background-video` if there a background video
- Add the class `gutenstrap-has-background-opacity-#` with the number 0-10
- Add the style `--gutenstrap-background-color` with the chosen background color
- Add the style `--gutenstrap-background-color2` with the chosen second background color
- Add the style `--gutenstrap-background-direction` with the gradient direction

```js
import classnames from "classnames";

export const save = props => {
	const { className } = props;
	const {
		backgroundColorType,
		backgroundType,
		backgroundOpacity,
		backgroundColor,
		backgroundImageID,
		backgroundImageURL,
		fixedBackground
	} = props.attributes;

	const mainClasses = classnames(
		[
			className,
			"gutenstrap-has-background-opacity-" +
				1 * Math.round(backgroundOpacity / 1)
		],
		{
			"gutenstrap-has-background": backgroundColor || backgroundImageURL,
			"gutenstrap-has-background-image": backgroundImageURL,
			"gutenstrap-background-on-hover": backgroundOnHover,
			"gutenstrap--has-background-video": backgroundType === "video",
			"gutenstrap--has-background-gradient": backgroundColorType === "gradient"
		}
	);

	const mainStyle = {
		backgroundColor: backgroundColor ? backgroundColor : undefined,
		backgroundImage: backgroundImageURL
			? `url(${backgroundImageURL})`
			: undefined,
		backgroundAttachment: fixedBackground ? "fixed" : undefined,
		"--gutenstrap-background-color":
			backgroundImageURL || backgroundColorType === "gradient"
				? backgroundColor
				: undefined,
		"--gutenstrap-background-color2":
			backgroundColorType === "gradient" && backgroundColor2
				? backgroundColor2
				: undefined,
		"-- -background-direction":
			backgroundColorType === "gradient"
				? `${backgroundColorDirection}deg`
				: undefined,
		"--gutenstrap-background-image": backgroundImageURL
			? backgroundImageURL
			: ""
	};

	return (
		<div className={mainClasses} style={mainStyle}>
			{backgroundType === "video" && (
				<video
					className={"gutenstrap-video-background"}
					autoPlay
					muted
					loop
					src={backgroundImageURL}
				/>
			)}
			// ...
		</div>
	);
};
```