How to use the @patternfly/react-core.BackgroundImageSrc.sm function in @patternfly/react-core

const listItem = (
    <>
      
        Terms of Use 
      
      
        Help
      
      
        Privacy Policy
      
    
  );
  const images = {
    [BackgroundImageSrc.lg]: bg_image,
    [BackgroundImageSrc.sm]: bg_image,
    [BackgroundImageSrc.sm2x]: bg_image,
    [BackgroundImageSrc.xs]: bg_image,
    [BackgroundImageSrc.xs2x]: bg_image
  };
  const loginForm = (

*/

import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core';
import filter from '@patternfly/react-core/dist/styles/assets/images/background-filter.svg';
/* eslint-disable camelcase */
import pfbg_1200 from '@patternfly/react-core/dist/styles/assets/images/pfbg_1200.jpg';
import pfbg_576 from '@patternfly/react-core/dist/styles/assets/images/pfbg_576.jpg';
import pfbg_576_2x from '@patternfly/react-core/dist/styles/assets/images/pfbg_576@2x.jpg';
import pfbg_768 from '@patternfly/react-core/dist/styles/assets/images/pfbg_768.jpg';
import pfbg_768_2x from '@patternfly/react-core/dist/styles/assets/images/pfbg_768@2x.jpg';
import * as React from 'react';
/* eslint-enable camelcase */

const bgImages = {
  [BackgroundImageSrc.lg]: pfbg_1200,
  [BackgroundImageSrc.sm]: pfbg_768,
  [BackgroundImageSrc.sm2x]: pfbg_768_2x,
  [BackgroundImageSrc.xs]: pfbg_576,
  [BackgroundImageSrc.xs2x]: pfbg_576_2x,
  [BackgroundImageSrc.filter]: `${filter}#image_overlay`,
};

const Background: React.FC = () => (
  
);

export default Background;

constructor(props) {
    super(props);
    /**
     * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
     */
    this.images = {
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg'
    };
  }
  render() {

LoginMainFooterBandItem,
  LoginMainFooterLinksItem,
  LoginPage,
  BackgroundImageSrc,
  ListItem,
  ListVariant,
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';

/**
 * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
 */

const images = {
  [BackgroundImageSrc.lg]: pfbg_1200,
  [BackgroundImageSrc.sm]: pfbg_768,
  [BackgroundImageSrc.sm2x]: pfbg_768_2x,
  [BackgroundImageSrc.xs]: pfbg_576,
  [BackgroundImageSrc.xs2x]: pfbg_576_2x,
  [BackgroundImageSrc.filter]: ''
};

export interface LoginPageDemoState {
  showHelperText: boolean;
  usernameValue: string;
  isValidUsername: boolean;
  passwordValue: string;
  isValidPassword: boolean;
  isRememberMeChecked: boolean;
}

export class LoginPageDemo extends React.Component, LoginPageDemoState> {

import React from 'react';
import { BackgroundImage, BackgroundImageProps, BackgroundImageSrc } from '@patternfly/react-core';
const pfbg_1200 = require('../LoginPageDemo/images/pfbg_1200.jpg');
const pfbg_768 = require('../LoginPageDemo/images/pfbg_768.jpg');
const pfbg_768_2x = require('../LoginPageDemo/images/pfbg_768@2x.jpg');
const pfbg_576 = require('../LoginPageDemo/images/pfbg_576.jpg');
const pfbg_576_2x = require('../LoginPageDemo/images/pfbg_576@2x.jpg');

export class BackgroundImageDemo extends React.Component {
  myBackgroundProps: BackgroundImageProps = {
    /**
     * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
     */
    src: {
      [BackgroundImageSrc.lg]: pfbg_1200,
      [BackgroundImageSrc.sm]: pfbg_768,
      [BackgroundImageSrc.sm2x]: pfbg_768_2x,
      [BackgroundImageSrc.xs]: pfbg_576,
      [BackgroundImageSrc.xs2x]: pfbg_576_2x,
      [BackgroundImageSrc.filter]: ''
    }
  };

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  render() {
    return ;
  }
}

isPlain
              position="right"
              onSelect={this.onDropdownSelect}
              isOpen={isDropdownOpen}
              toggle={Kyle Baker}
              dropdownItems={userDropdownItems}
            />
          
        
      
    );
    const bgImages = {
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
      [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
      [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
    };

    const Header = (
      }
        toolbar={PageToolbar}
        avatar={}
        showNavToggle
        onNavToggle={this.onNavToggle}
      />
    );

LoginForm,
  LoginMainFooterBandItem,
  LoginMainFooterLinksItem,
  LoginPage,
  BackgroundImageSrc,
  ListItem
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';

/**
 * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
 */

const images = {
  [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
  [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
  [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
  [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
  [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
  [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
};

class SimpleLoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showHelperText: false,
      usernameValue: '',
      isValidUsername: true,
      passwordValue: '',
      isValidPassword: true,
      isRememberMeChecked: false

* See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core';
import filter from '@patternfly/react-core/dist/styles/assets/images/background-filter.svg';
import pfbg_1200 from '@patternfly/react-core/dist/styles/assets/images/pfbg_1200.jpg';
import pfbg_576 from '@patternfly/react-core/dist/styles/assets/images/pfbg_576.jpg';
import pfbg_576_2x from '@patternfly/react-core/dist/styles/assets/images/pfbg_576@2x.jpg';
import pfbg_768 from '@patternfly/react-core/dist/styles/assets/images/pfbg_768.jpg';
import pfbg_768_2x from '@patternfly/react-core/dist/styles/assets/images/pfbg_768@2x.jpg';
import * as React from 'react';

const bgImages = {
  [BackgroundImageSrc.lg]: pfbg_1200,
  [BackgroundImageSrc.sm]: pfbg_768,
  [BackgroundImageSrc.sm2x]: pfbg_768_2x,
  [BackgroundImageSrc.xs]: pfbg_576,
  [BackgroundImageSrc.xs2x]: pfbg_576_2x,
  [BackgroundImageSrc.filter]: `${filter}#image_overlay`,
};

const Background: React.FC = () => (
  
);

export default Background;

import React, { Fragment } from 'react';

import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core';
import bgFilter from '@patternfly/patternfly/assets/images/background-filter.svg';

const backgroundImageConfig = {
  [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
  [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
  [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
  [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
  [BackgroundImageSrc.lg]: '/assets/images/pfbg_2000.jpg',
  [BackgroundImageSrc.filter]: `${bgFilter}#image_overlay`,
};

export default ({ children }) => (
  
    
    {children}
  
);

import pfbg_576 from '@patternfly/patternfly/assets/images/pfbg_576.jpg';
import pfbg_576_2x from '@patternfly/patternfly/assets/images/pfbg_576@2x.jpg';
import pfbg_768 from '@patternfly/patternfly/assets/images/pfbg_768.jpg';
import pfbg_768_2x from '@patternfly/patternfly/assets/images/pfbg_768@2x.jpg';
import {
  BackgroundImage,
  BackgroundImageSrc,
  BackgroundImageSrcMap,
  Brand,
} from '@patternfly/react-core';
import * as React from 'react';

const defaultProps: IOVRThemeProviderProps = {
  bgImages: {
    [BackgroundImageSrc.lg]: pfbg_1200,
    [BackgroundImageSrc.sm]: pfbg_768,
    [BackgroundImageSrc.sm2x]: pfbg_768_2x,
    [BackgroundImageSrc.xs]: pfbg_576,
    [BackgroundImageSrc.xs2x]: pfbg_576_2x,
    [BackgroundImageSrc.filter]: `${filter}#image_overlay`,
  },
  brandImg: '/assets/images/optaPlannerLogo200px.png',
};

const PatternFlyContext = React.createContext({
  ...defaultProps,
  components: {
    Background: undefined,
    Brand: undefined,
  },
});