Background

The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the background_color prop to assign its color. The colors that you can choose from for the background_color prop are: gradient, dark, light, white, status colors, product colors, and category colors.

The custom_color prop allows you to pass a hex value (ex. "#e43718") in place of background_color. It is not case sensitive, but needs to start with #. This prop exists primarily for use in microsites and very specific situations. Avoid using unless absolutely necessary to maintain continuity.

Light

import React from 'react'

import { Background } from 'playbook-ui'

const BackgroundLight = (props) => (
  <Background
      backgroundColor="light"
      padding="xl"
  />
)

export default BackgroundLight

White

import React from 'react'

import { Background } from 'playbook-ui'

const BackgroundWhite = (props) => (
  <div>
    <Background
        backgroundColor="white"
        padding="xl"
    />
  </div>

)

export default BackgroundWhite

Gradient

import React from 'react'

import { Background } from 'playbook-ui'

const BackgroundGradient = (props) => (
  <Background
      backgroundColor="gradient"
      padding="xl"
  />
)

export default BackgroundGradient

Image

To add a lazyload on the background image simply use the transition prop and one of the three string options "fade", "blur", or "scale".

import React, { useState } from 'react'

import { Background, Card, Flex, FlexItem, Select, Title } from 'playbook-ui'

const BackgroundImage = (props) => {
  const [transition, setTransition] = useState('')

  const handleTransition = ({ target }) => {
    setTransition(target.value)
  }

  const options = [
    {
      value: 'fade',
    },
    {
      value: 'blur',
    },
    {
      value: 'scale',
    },
  ]

  return (
    <>
      <Background
          alt="colorful background"
          className="background lazyload"
          imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
          transition={transition}
      >
        <Flex
            orientation="column"
            vertical="center"
        >
          <FlexItem>
            <Title
                dark
                padding="lg"
                size={1}
                text="Background Kit Image"
            />
          </FlexItem>
          <FlexItem
              padding="lg"
          >
            <Card
                shadow="deepest"
            >
              {
                'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'
              }
            </Card>
          </FlexItem>
        </Flex>
      </Background>
      <Flex marginTop="xl">
        <FlexItem fixedSize="250px">
          <Select
              blankSelection="Select a Transition..."
              label=""
              name="dropdown"
              onChange={handleTransition}
              options={options}
              transition={transition}
          />
        </FlexItem>
      </Flex>
    </>
  )
}

export default BackgroundImage

Status

Status colors can be passed into the background kit. success, success_secondary, warning, warning_secondary, error, error_secondary, info, info_secondary, neutral, neutral_secondary, primary, and primary_secondary

import React from 'react'

import { Background, Flex } from 'playbook-ui'

const BackgroundStatus = (props) => (
<Flex
    gap="md"
    justify="center"
    wrap
>
    <Background
        backgroundColor="success"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="success_secondary"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="warning"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="warning_secondary"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="error"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="error_secondary"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="info"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="info_secondary"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="neutral"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="neutral_secondary"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="primary"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="primary_secondary"
        padding="xl"
    />
  </Flex>
)

export default BackgroundStatus

Status Subtle

Status Subtle colors can be passed into the background kit. success_subtle, warning_subtle,error_subtle, info_subtle and neutral_subtle

import React from 'react'

import { Background, Flex } from 'playbook-ui'

const BackgroundStatusSubtle = (props) => (
<Flex
    gap="md"
    justify="center"
    wrap
>
    <Background
        backgroundColor="success_subtle"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="warning_subtle"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="error_subtle"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="info_subtle"
        padding="xl"
    />
    <br />
    <Background
        backgroundColor="neutral_subtle"
        padding="xl"
    />
    <br />
  </Flex>
)

export default BackgroundStatusSubtle

Category

Category colors can be passed into the background kit. Values category_1 to category_21 are accepted. List of all category and status colors can be viewed here.

import React from 'react'

import { Background, Flex } from 'playbook-ui'

const BackgroundCategory = (props) => (
  <Flex
      gap="md"
      justify="center"
      wrap
  >
    <Background
        backgroundColor="category_1"
        padding="xl"
    />
    <Background
        backgroundColor="category_2"
        padding="xl"
    />
    <Background
        backgroundColor="category_3"
        padding="xl"
    />
    <Background
        backgroundColor="category_4"
        padding="xl"
    />
    <Background
        backgroundColor="category_5"
        padding="xl"
    />
    <Background
        backgroundColor="category_6"
        padding="xl"
    />
    <Background
        backgroundColor="category_7"
        padding="xl"
    />
    <Background
        backgroundColor="category_8"
        padding="xl"
    />
    <Background
        backgroundColor="category_9"
        padding="xl"
    />
    <Background
        backgroundColor="category_10"
        padding="xl"
    />
    <Background
        backgroundColor="category_11"
        padding="xl"
    />
    <Background
        backgroundColor="category_12"
        padding="xl"
    />
    <Background
        backgroundColor="category_13"
        padding="xl"
    />
    <Background
        backgroundColor="category_14"
        padding="xl"
    />
    <Background
        backgroundColor="category_15"
        padding="xl"
    />
    <Background
        backgroundColor="category_16"
        padding="xl"
    />
    <Background
        backgroundColor="category_17"
        padding="xl"
    />
    <Background
        backgroundColor="category_18"
        padding="xl"
    />
    <Background
        backgroundColor="category_19"
        padding="xl"
    />
    <Background
        backgroundColor="category_20"
        padding="xl"
    />
    <Background
        backgroundColor="category_21"
        padding="xl"
    />
  </Flex>
)

export default BackgroundCategory

Size

Background size can be passed into the background kit. Values auto, cover, and contain are accepted.

💡 Note: When using contain you might not want to have a repeating background as this will not always look pleasant. To prevent this, you may pass no-repeat to the backgroundRepeat prop.

import React, { Fragment as F } from 'react'

import { Background } from 'playbook-ui'

const BackgroundSize = (props) => (
  <F>
    <Background
        alt="colorful background"
        backgroundSize="auto"
        className="background lazyload"
        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
        padding="xl"
    />
    <br/>
    <Background
        alt="colorful background"
        backgroundSize="cover"
        className="background lazyload"
        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
        padding="xl"
    />
    <br/>
    <Background
        alt="colorful background"
        backgroundRepeat="no-repeat"
        backgroundSize="contain"
        className="background lazyload"
        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
        padding="xl"
    />
  </F>
)

export default BackgroundSize

Overlay

An overlay can be added to the background image by setting the imageOverlay prop and adding a backgroundColor. The imageOverlay prop can be set to any opacity ranging from opacity_1 to opacity_10.

import React from 'react'

import { Background, Flex, FlexItem, Title } from 'playbook-ui'

const BackgroundOverlay = (props) => {
  return (
    <Background
        alt="colorful background"
        backgroundColor="category_21"
        className="background lazyload"
        imageOverlay="opacity_2"
        imageUrl="https://unsplash.it/500/400/?image=633"
      >
        <Flex
            orientation="column"
            vertical="center"
        >
          <FlexItem>
            <Title
                dark
                padding="lg"
                size={1}
                text="Background Kit Image"
            />
          </FlexItem>
        </Flex>
      </Background>
  )
}

export default BackgroundOverlay

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat