diff --git a/src/icons/logo-white.svg b/src/icons/logo-white.svg
new file mode 100644
index 00000000..bc94adec
--- /dev/null
+++ b/src/icons/logo-white.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/icons/logo.svg b/src/icons/logo.svg
index d1ec3a75..546bb417 100644
--- a/src/icons/logo.svg
+++ b/src/icons/logo.svg
@@ -1 +1,9 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 0df1abcb..9c3c4173 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -18,6 +18,7 @@ import createOgUrl from 'utils/createOgUrl';
import loadScript from 'utils/loadScript';
import {babelURL} from 'site-constants';
import ReactDOM from 'react-dom';
+import logoWhiteSvg from 'icons/logo-white.svg';
class Home extends Component {
constructor(props, context) {
@@ -99,10 +100,20 @@ class Home extends Component {
maxWidth: 1500, // Positioning of background logo
marginLeft: 'auto',
marginRight: 'auto',
- backgroundImage: 'url(/large-logo.svg)',
- backgroundRepeat: 'no-repeat',
- backgroundPosition: '100% 100px',
- backgroundSize: '50% auto',
+ position: 'relative',
+ '::before': {
+ content: ' ',
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ backgroundImage: `url(${logoWhiteSvg})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: '100% 100px',
+ backgroundSize: '50% auto',
+ opacity: 0.05,
+ },
},
}}>
diff --git a/static/large-logo.svg b/static/large-logo.svg
deleted file mode 100644
index 6bd38ac2..00000000
--- a/static/large-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file