diff --git a/src/App.jsx b/src/App.jsx
index c03ecbcb06..07e7021ddf 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,8 +9,6 @@ import {
   Route,
 } from 'react-router-dom';
 import {
-  BackgroundImage,
-  BackgroundImageSrc,
   Nav,
   NavList,
   Page,
@@ -30,6 +28,7 @@ import { API_LOGOUT, API_CONFIG } from './endpoints';
 import ja from '../build/locales/ja/messages';
 import en from '../build/locales/en/messages';
 import Login from './pages/Login';
+import Background from './components/Background';
 import HelpDropdown from './components/HelpDropdown';
 import LogoutButton from './components/LogoutButton';
 import TowerLogo from './components/TowerLogo';
@@ -43,18 +42,6 @@ const language = (navigator.languages && navigator.languages[0])
   || navigator.userLanguage;
 const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
 
-// define background src image config
-const backgroundConfig = {
-  [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'
-};
 
 class App extends React.Component {
   constructor(props) {
@@ -113,8 +100,7 @@ class App extends React.Component {
                     <Route path="/login" render={() => <Redirect to='/home' />} />
                     <Route exact path="/" render={() => <Redirect to='/home' />} />
                     <Route render={() => (
-                      <Fragment>
-                        <BackgroundImage src={backgroundConfig} />
+                      <Background>
                         <Page
                           usecondensed="True"
                           header={(
@@ -171,7 +157,7 @@ class App extends React.Component {
                             ))
                         }
                         </Page>
-                      </Fragment>
+                      </Background>
                     )} />
                   </Switch>
                 </ConfigContext.Provider>
diff --git a/src/components/Background.jsx b/src/components/Background.jsx
new file mode 100644
index 0000000000..b1dce984be
--- /dev/null
+++ b/src/components/Background.jsx
@@ -0,0 +1,25 @@
+import React, { Fragment } from 'react';
+
+import {
+  BackgroundImage,
+  BackgroundImageSrc,
+} from '@patternfly/react-core';
+
+const backgroundImageConfig = {
+  [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',
+};
+
+export default ({ children }) => (
+  <Fragment>
+    <BackgroundImage src={backgroundImageConfig} />
+    { children }
+  </Fragment>
+);
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 20690940b2..ba7917f9a3 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -10,6 +10,8 @@ import {
 import towerLogo from '../../images/tower-logo-header.svg';
 import api from '../api';
 
+import Background from '../components/Background';
+
 class AtLogin extends Component {
   constructor (props) {
     super(props);
@@ -64,23 +66,25 @@ class AtLogin extends Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <LoginPage
-            brandImgSrc={logoSrc}
-            brandImgAlt={alt || 'Ansible Tower'}
-            loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
-          >
-            <LoginForm
-              usernameLabel={i18n._(t`Username`)}
-              usernameValue={username}
-              onChangeUsername={this.handleUsernameChange}
-              passwordLabel={i18n._(t`Password`)}
-              passwordValue={password}
-              onChangePassword={this.handlePasswordChange}
-              isValidPassword={isValidPassword}
-              passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
-              onLoginButtonClick={this.handleSubmit}
-            />
-          </LoginPage>
+          <Background>
+            <LoginPage
+              brandImgSrc={logoSrc}
+              brandImgAlt={alt || 'Ansible Tower'}
+              loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
+            >
+              <LoginForm
+                usernameLabel={i18n._(t`Username`)}
+                usernameValue={username}
+                onChangeUsername={this.handleUsernameChange}
+                passwordLabel={i18n._(t`Password`)}
+                passwordValue={password}
+                onChangePassword={this.handlePasswordChange}
+                isValidPassword={isValidPassword}
+                passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
+                onLoginButtonClick={this.handleSubmit}
+              />
+            </LoginPage>
+          </Background>
         )}
       </I18n>
     );