diff --git a/static/src/js/app.js b/static/src/js/app.js
index 825a567..e2bad06 100644
--- a/static/src/js/app.js
+++ b/static/src/js/app.js
@@ -9,7 +9,9 @@ import React from 'react';
import NavBar from './components/navbar/navbar';
import Breadcrumbs from './components/breadcrumbs';
+import renderImagePanels from './components/image-panel';
+renderImagePanels();
if ($('navbar').length > 0) {
React.render(, $('navbar')[0]);
diff --git a/static/src/js/components/image-panel.js b/static/src/js/components/image-panel.js
new file mode 100644
index 0000000..0efb895
--- /dev/null
+++ b/static/src/js/components/image-panel.js
@@ -0,0 +1,21 @@
+export default function renderImagePanels() {
+ $('.image-panel').each(function () {
+ const element = $(this);
+
+ element.css('background-image', 'url("' + element.data('image') + '")');
+
+ let height;
+ switch (element.data('size').toLowerCase()) {
+ case 'small':
+ height = '30';
+ break;
+ default:
+ case 'medium':
+ height = '60';
+ break;
+ case 'large':
+ height = '100';
+ }
+ element.css('background-image', `${height}vh`);
+ });
+}
diff --git a/static/src/less/components.less b/static/src/less/components.less
new file mode 100644
index 0000000..f53b0ec
--- /dev/null
+++ b/static/src/less/components.less
@@ -0,0 +1,7 @@
+.image-panel {
+ background-attachment: fixed;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 100%;
+}
diff --git a/static/src/less/style.less b/static/src/less/style.less
index 5f63433..59b90a3 100644
--- a/static/src/less/style.less
+++ b/static/src/less/style.less
@@ -8,6 +8,7 @@
@import 'variables';
@import 'navbar';
@import 'assets';
+@import 'components';
/* @group Global */
.btn {
diff --git a/templates/robotics/index.html b/templates/robotics/index.html
index 0ba3294..6c69b20 100644
--- a/templates/robotics/index.html
+++ b/templates/robotics/index.html
@@ -45,4 +45,5 @@
+
{% endblock %}