include "work area" picture (#28030)

gadjo/static/css/gadjo.scss

@@ -165,8 +165,6 @@ ul.user-info {
 /* header */
 
 div#header {
-	background: #C2D1CC url(header-03.jpeg);
-	background-size: 100% 500px;
 	background: $primary-color;
 	background: var(--primary-color);
 	padding-left: 0px;
@@ -209,37 +207,41 @@ div#header h1 {
 	a:hover {
 		opacity: 1;
 	}
-}
 
-div#header h1.breadcrumbs {
-	a:last-child {
-		/* hide last breadcrumb item (== current page) */
-		display: none;
-	}
+	&.breadcrumbs {
+		a:last-child {
+			/* hide last breadcrumb item (== current page) */
+			display: none;
+		}
 
-	span.separator {
-		display: none;
-	}
+		span.separator {
+			display: none;
+		}
 
-	a::after {
-		content: "";
-		height: $header-height + 2px;
-		width: $header-height + 2px;
-		@include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)');
-		display: inline-block;
-		position: absolute;
-		top: 0px;
-		right: -21px;
-		box-shadow: 1px -1px 0px 1px #bbb, 2px -2px 0px 2px white;
-		z-index: 100;
-		border-width: 1px 1px 0 0;
+		a::after {
+			content: "";
+			height: $header-height + 2px;
+			width: $header-height + 2px;
+			@include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)');
+			display: inline-block;
+			position: absolute;
+			top: 0px;
+			right: -21px;
+			box-shadow: 1px -1px 0px 1px #bbb, 2px -2px 0px 2px white;
+			z-index: 100;
+			border-width: 1px 1px 0 0;
+		}
 	}
 }
 
-body[data-environment-label] span#applabel {
-	background-image: repeating-linear-gradient(-45deg, #333, black 14px, #ffe761 15px, #ffe761 29px, black 30px);
-	color: white;
-	text-shadow: 0 0 1px black;
+body[data-environment-label] div#header {
+	background-image: url(../images/work-bg.png);
+	background-position: 230px 0;
+	background-repeat: no-repeat;
+	h1 {
+		// + picture width
+		padding-left: $sidepage-width + $sidepage-left-space + 70px;
+	}
 }
 
 span#applabel {