diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx
index bbf9cd03d3c..b892ac3319f 100644
--- a/public/app/core/components/Branding/Branding.tsx
+++ b/public/app/core/components/Branding/Branding.tsx
@@ -1,7 +1,9 @@
 import React, { FC } from 'react';
+import { css, cx } from 'emotion';
 
 export interface BrandComponentProps {
   className?: string;
+  children?: JSX.Element | JSX.Element[];
 }
 
 export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
@@ -13,11 +15,21 @@ export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
   );
 };
 
+export const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
+  const background = css`
+    background: url(public/img/heatmap_bg_test.svg);
+    background-size: cover;
+  `;
+
+  return <div className={cx(background, className)}>{children}</div>;
+};
+
 export const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
   return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
 };
 
 export class Branding {
   static LoginLogo = LoginLogo;
+  static LoginBackground = LoginBackground;
   static MenuLogo = MenuLogo;
 }
diff --git a/public/app/core/components/Login/LoginPage.tsx b/public/app/core/components/Login/LoginPage.tsx
index 2a50c573597..c565e0de1d7 100644
--- a/public/app/core/components/Login/LoginPage.tsx
+++ b/public/app/core/components/Login/LoginPage.tsx
@@ -1,15 +1,18 @@
+// Libraries
 import React, { FC } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+// Components
 import { UserSignup } from './UserSignup';
 import { LoginServiceButtons } from './LoginServiceButtons';
 import LoginCtrl from './LoginCtrl';
 import { LoginForm } from './LoginForm';
 import { ChangePassword } from './ChangePassword';
-import { CSSTransition } from 'react-transition-group';
 import { Branding } from 'app/core/components/Branding/Branding';
 
 export const LoginPage: FC = () => {
   return (
-    <div className="login container">
+    <Branding.LoginBackground className="login container">
       <div className="login-content">
         <div className="login-branding">
           <Branding.LoginLogo className="logo-icon" />
@@ -59,6 +62,6 @@ export const LoginPage: FC = () => {
 
         <div className="clearfix" />
       </div>
-    </div>
+    </Branding.LoginBackground>
   );
 };
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 711c1c1ed13..4eb32c4b83b 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -10,8 +10,6 @@ $login-border: #8daac5;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-image: url(../img/heatmap_bg_test.svg);
-  background-size: cover;
   color: #d8d9da;
 
   & a {