retro-react
Version:
A React component library for building retro-style websites
43 lines (42 loc) • 1.78 kB
TypeScript
/** @jsxImportSource theme-ui */
import { CSSProperties } from 'react';
import { ThemeUICSSObject } from 'theme-ui';
export interface BackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* The background color of the Background.
*
* @default '#000000'
*/
color: CSSProperties['color'];
/**
* The background image of the Background.
*/
backgroundImage?: string;
/**
* The background repeat property of the Background.
*/
backgroundRepeat?: 'repeat' | 'no-repeat' | 'repeat-x' | 'repeat-y' | 'inherit' | 'initial' | 'unset';
/**
* The background size property of the Background.
*/
backgroundSize?: 'auto' | 'cover' | 'contain' | 'inherit' | 'initial' | 'unset';
/**
* The background position property of the Background.
*/
backgroundPosition?: 'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom' | 'inherit' | 'initial' | 'unset';
sx?: ThemeUICSSObject;
}
/**
* The Background component is used to display a background.
* It can be used to display a background image or a background color.
* It accepts `children` prop that will be displayed on top of the background.
* Background will take the full width and height of its parent.
*
* @example
* <Background color="darkseagreen" backgroundImage="/images/background.jpg" backgroundRepeat="no-repeat" backgroundSize="cover" backgroundPosition="center">
* <Container>
* <Text>Hello World</Text>
* </Container>
* </Background>
*/
export declare const Background: import("react").ForwardRefExoticComponent<BackgroundProps & import("react").RefAttributes<HTMLDivElement>>;