feat: add watermark (#193)

src/app/welcome/welcome-overview/welcome-overview.component.html

@@ -1,14 +1,11 @@
 <ocx-portal-page helpArticleId="PAGE_WELCOME_VIEW" permission="IMAGE#VIEW">
   <!-- BACKGROUND (below the content) -->
   <div class="absolute top-0 left-0 w-full h-full">
-    <!-- Default background if no image can be displayed -->
-    <div class="absolute surface-600 w-full h-full z-1"></div>
-
     <!-- Bachground Image -->
     <ng-container *ngFor="let image of imageData$ | async; let i = index">
       <img
         *ngIf="!loading && i === currentSlide"
-        class="absolute w-full h-full z-2"
+        class="w-full h-full"
         @carouselAnimation
         [src]="this.buildImageSrc(image)"
         [alt]="'LANDING.PIC' | translate"
@@ -17,7 +14,7 @@
     </ng-container>
   </div>
   <!-- CONTENT -->
-  <div class="content relative z-3 w-full flex flex-column row-gap-3 sm:px-2">
+  <div class="content relative z-1 w-full flex flex-column row-gap-3 sm:px-2">
     <!-- INFO -->
     <div class="m-0 sm:my-1 md:my-2 lg:my-3 flex flex-row flex-wrap justify-content-between text-white">
       <div>

src/app/welcome/welcome-overview/welcome-overview.component.ts

@@ -10,7 +10,6 @@ import { ImageDataResponse, ImageInfo, ImagesInternalAPIService } from 'src/app/
 @Component({
   selector: 'app-welcome-overview',
   templateUrl: './welcome-overview.component.html',
-  styleUrls: ['./welcome-overview.component.scss'],
   animations: [
     trigger('carouselAnimation', [
       transition('void => *', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))]),

src/styles.scss

@@ -9,3 +9,11 @@
 @import 'node_modules/@onecx/portal-layout-styles/src/styles/shell/shell.scss';
 @import 'node_modules/@onecx/portal-layout-styles/src/styles/primeng/theme-light.scss';
 @import 'node_modules/@onecx/portal-integration-angular/assets/styles.scss';
+
+.layout-content {
+  background-size: 500px !important;
+  background-color: var(--surface-600) !important;
+  background-image: url(assets/images/onecx_watermark_dark.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+}