Background

Style a component's background properties

import { background } from 'jynx'

The background function gives you control of a component's background styles, providing support for both the shorthand property and all of its sub-properties including background-image, background-position, background-repeat, etc.

Usage

To use the background function, create a component using the BackgroundProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { background, BackgroundProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<BackgroundProps>`
    ${background}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<BackgroundProps>((props) => `
    ${background}
  `)

Props

By default, when passing a string to any background props, the raw css value is used. This means you can define background styles however you normally would:

<Component background='url("hero_img.png") no-repeat cover center' />

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Types

When working in typescript, use the BackgroundProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface BackgroundProps {
  background?: StyleProp<CSS.Property.Background>
  backgroundAttachment?: StyleProp<CSS.Property.BackgroundAttachment>
  backgroundBlendMode?: StyleProp<CSS.Property.BackgroundBlendMode>
  backgroundClip?: StyleProp<CSS.Property.BackgroundClip>
  backgroundImage?: StyleProp<CSS.Property.BackgroundImage>
  backgroundOrigin?: StyleProp<CSS.Property.BackgroundOrigin>
  backgroundPosition?: StyleProp<CSS.Property.BackgroundPosition>
  backgroundPositionX?: StyleProp<CSS.Property.BackgroundPositionX>
  backgroundPositionY?: StyleProp<CSS.Property.BackgroundPositionY>
  backgroundRepeat?: StyleProp<CSS.Property.BackgroundRepeat>
  backgroundSize?: StyleProp<CSS.Property.BackgroundSize>
}

API

The background function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	Shorthand	CSS Property
background	bg	background
backgroundAttachment	bgAttachment	background-attachment
backgroundBlendMode	bgBlendMode	background-blend-mode
backgroundClip	bgClip	background-clip
backgroundImage	bgImage	background-image
backgroundOrigin	bgOrigin	background-origin
backgroundPosition	bgPos	background-position
backgroundPositionX	bgPosX	background-positionX
backgroundPositionY	bgPosY	background-positionY
backgroundRepeat	bgRepeat	background-repeat
backgroundSize	bgSize	background-size

Examples

/* using plain CSS values */
<Component background='#db9cd7 url("hero_img.png") no-repeat cover center' />


/* using a shorthand alias */
<Component bg='aquamarine' />


/* based on a conditional */
<Component bgSize={isActive ? '105%' : '100%'} />


/* using responsive styles */
<Component bgRepeat={['repeat-y', null, 'repeat-x', 'no-repeat']} />

<Component bgBlendMode={{_: 'multiply', md: 'overlay', lg: 'screen'}} />