From 047114a061a257bb7bf9214b699f9b8e76a48dc5 Mon Sep 17 00:00:00 2001
From: Kmaschta <kevin@marmelab.com>
Date: Fri, 30 Nov 2018 15:35:28 +0100
Subject: [PATCH] Add a doc about login page background

---
 docs/Admin.md   |  5 ++++-
 docs/Theming.md | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/docs/Admin.md b/docs/Admin.md
index 5d057ea0f30..ee1f8bbd699 100644
--- a/docs/Admin.md
+++ b/docs/Admin.md
@@ -38,6 +38,7 @@ Here are all the props accepted by the component:
 * [`customSagas`](#customsagas)
 * [`customRoutes`](#customroutes)
 * [`authProvider`](#authprovider)
+* [`backgroundImage`](#backgroundImage)
 * [`loginPage`](#loginpage)
 * [`logoutButton`](#logoutbutton)
 * [`locale`](#internationalization)
@@ -471,7 +472,9 @@ const App = () => (
 );
 ```
 
-See The [Authentication documentation](./Authentication.md#customizing-the-login-and-logout-components) for more details.
+Before considering to write your own login page component, please take a look at how to change the default [background image](./Theming.md#using-a-custom-login-page) or the [Material UI theme](#theme).
+
+See the [Authentication documentation](./Authentication.md#customizing-the-login-and-logout-components) for more details.
 
 ## `logoutButton`
 
diff --git a/docs/Theming.md b/docs/Theming.md
index dad784c580a..706403845d8 100644
--- a/docs/Theming.md
+++ b/docs/Theming.md
@@ -704,6 +704,24 @@ const mapStateToProps = state => ({
 export default withRouter(connect(mapStateToProps)(withStyles(styles)(Menu)));
 ```
 
+## Using a Custom Login Page
+
+### Changing the Background Image
+
+By default, the login page displays a random background image changing every day. If you want to change that background image, you can use the default Login page component and pass an image URL as the `backgroundImage` prop.
+
+```jsx
+import { Admin, Login } from 'react-admin';
+
+const MyLoginPage = () => <Login backgroundImage="/background.jpg" />;
+
+const App = () => (
+    <Admin loginPage={MyLoginPage}>
+        // ...
+    </Admin>
+);
+```
+
 ## Notifications
 
 You can override the notification component, for instance to change the notification duration. It defaults to 4000, i.e. 4 seconds, and you can override it using the `autoHideDuration` prop. For instance, to create a custom Notification component with a 5 seconds default: