diff --git a/packages/rocketchat-assets/server/assets.js b/packages/rocketchat-assets/server/assets.js
index 9d2892b1586b..6a48e0330eb9 100644
--- a/packages/rocketchat-assets/server/assets.js
+++ b/packages/rocketchat-assets/server/assets.js
@@ -28,6 +28,16 @@ const assets = {
 			order: 2
 		}
 	},
+	background: {
+		label: 'login background (svg, png, jpg)',
+		defaultUrl: undefined,
+		constraints: {
+			type: 'image',
+			extensions: ['svg', 'png', 'jpg', 'jpeg'],
+			width: undefined,
+			height: undefined
+		}
+	},
 	favicon_ico: {
 		label: 'favicon (ico)',
 		defaultUrl: 'favicon.ico',
diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index 52d4765ca70c..b46e0e5ddef9 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -4626,6 +4626,11 @@ body:not(.is-cordova) {
 	align-items: center;
 	flex-flow: row nowrap;
 
+	background-position: center;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
+
 	& .wrapper {
 		position: relative;
 		z-index: 10;
diff --git a/packages/rocketchat-ui-login/client/login/layout.html b/packages/rocketchat-ui-login/client/login/layout.html
index f05d14d4799c..25ceae2d84e0 100644
--- a/packages/rocketchat-ui-login/client/login/layout.html
+++ b/packages/rocketchat-ui-login/client/login/layout.html
@@ -1,5 +1,5 @@
 <template name="loginLayout">
-	<section class="rc-old full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color" style="{{#with backgroundUrl}}background-image: url('{{.}}'){{/with}}">
 		<div class="wrapper">
 			{{> loginHeader }}
 			{{> Template.dynamic template=center}}
diff --git a/packages/rocketchat-ui-login/client/login/layout.js b/packages/rocketchat-ui-login/client/login/layout.js
index 886e17f83a2e..38b27abaead3 100644
--- a/packages/rocketchat-ui-login/client/login/layout.js
+++ b/packages/rocketchat-ui-login/client/login/layout.js
@@ -1,3 +1,13 @@
 Template.loginLayout.onRendered(function() {
 	$('#initial-page-loading').remove();
 });
+
+Template.loginLayout.helpers({
+	backgroundUrl() {
+		const asset = RocketChat.settings.get('Assets_background');
+		const prefix = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
+		if (asset && (asset.url || asset.defaultUrl)) {
+			return `${ prefix }/${ asset.url || asset.defaultUrl }`;
+		}
+	}
+});
diff --git a/packages/rocketchat-ui-login/client/username/layout.html b/packages/rocketchat-ui-login/client/username/layout.html
index 918b461250b8..b26417e73e79 100644
--- a/packages/rocketchat-ui-login/client/username/layout.html
+++ b/packages/rocketchat-ui-login/client/username/layout.html
@@ -1,5 +1,5 @@
 <template name="usernameLayout">
-	<section class="rc-old full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color" style="{{#with backgroundUrl}}background-image: url('{{.}}'){{/with}}">
 		<div class="wrapper">
 			{{> Template.dynamic template=render}}
 		</div>
diff --git a/packages/rocketchat-ui-login/client/username/layout.js b/packages/rocketchat-ui-login/client/username/layout.js
new file mode 100644
index 000000000000..7c670fb0033e
--- /dev/null
+++ b/packages/rocketchat-ui-login/client/username/layout.js
@@ -0,0 +1,9 @@
+Template.usernameLayout.helpers({
+	backgroundUrl() {
+		const asset = RocketChat.settings.get('Assets_background');
+		const prefix = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
+		if (asset && (asset.url || asset.defaultUrl)) {
+			return `${ prefix }/${ asset.url || asset.defaultUrl }`;
+		}
+	}
+});
diff --git a/packages/rocketchat-ui-login/client/username/username.html b/packages/rocketchat-ui-login/client/username/username.html
index fdc360d9d2bd..8bb202153936 100644
--- a/packages/rocketchat-ui-login/client/username/username.html
+++ b/packages/rocketchat-ui-login/client/username/username.html
@@ -1,5 +1,5 @@
 <template name="username">
-	<section class="rc-old full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color" style="{{#with backgroundUrl}}background-image: url('{{.}}'){{/with}}">
 		<div class="wrapper">
 			<form id="login-card" class="content-background-color color-primary-font-color" method='/'>
 				<header>
diff --git a/packages/rocketchat-ui-login/client/username/username.js b/packages/rocketchat-ui-login/client/username/username.js
index e2b4b3380c3a..e8395787c69b 100644
--- a/packages/rocketchat-ui-login/client/username/username.js
+++ b/packages/rocketchat-ui-login/client/username/username.js
@@ -16,6 +16,14 @@ Template.username.onCreated(function() {
 Template.username.helpers({
 	username() {
 		return Template.instance().username.get();
+	},
+
+	backgroundUrl() {
+		const asset = RocketChat.settings.get('Assets_background');
+		const prefix = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
+		if (asset && (asset.url || asset.defaultUrl)) {
+			return `${ prefix }/${ asset.url || asset.defaultUrl }`;
+		}
 	}
 });
 
diff --git a/packages/rocketchat-ui-login/package.js b/packages/rocketchat-ui-login/package.js
index db5728806d87..e507d65f7a06 100644
--- a/packages/rocketchat-ui-login/package.js
+++ b/packages/rocketchat-ui-login/package.js
@@ -42,5 +42,6 @@ Package.onUse(function(api) {
 	api.addFiles('client/login/header.js', 'client');
 	api.addFiles('client/login/services.js', 'client');
 	api.addFiles('client/login/social.js', 'client');
+	api.addFiles('client/username/layout.js', 'client');
 	api.addFiles('client/username/username.js', 'client');
 });