Add background for army overview

static/src/app/army/army.component.css

@@ -27,7 +27,7 @@
 .middle-row {
   min-height: 120px;
   border: rgb(34, 34, 34);
-  background-color: white;
+  background-color: #ffffffe0;
   border-left-style: solid;
   border-right-style: solid;
 }

static/src/app/army/army.component.ts

@@ -1,8 +1,9 @@
-import {Component} from "@angular/core";
+import {Component, Inject} from "@angular/core";
 import {Army} from "../models/model-interfaces";
 import {ArmyService} from "../services/army-service/army.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {Fraction} from "../utils/fraction.enum";
+import {DOCUMENT} from "@angular/common";
 
 
 @Component({
@@ -18,16 +19,30 @@ export class ArmyComponent {
 
   constructor(private router: Router,
               private route: ActivatedRoute,
-              private armyService: ArmyService) {
+              private armyService: ArmyService,
+              @Inject(DOCUMENT) private document) {
   }
 
   ngOnInit() {
+    // set background image css
+    const backgroundCss = '    background-image: url(../assets/bg.jpg);\n' +
+      '    background-size: cover;\n' +
+      '    background-attachment: fixed;\n' +
+      '    background-position: center;\n' +
+      '    background-repeat: no-repeat;';
+    this.document.getElementById('right').setAttribute('style', backgroundCss);
+
+    // init army data
     this.armyService.getArmy()
       .subscribe(army => {
         this.army = army;
       });
   };
 
+  ngOnDestroy() {
+    this.document.getElementById('right').setAttribute('style', '');
+  }
+
   select(memberId) {
     this.router.navigate([{outlets: {'right': ['member', memberId]}}], {relativeTo: this.route});
   }