I'm facing some challenges trying to create this specific layout, particularly with setting a background that should cover 50% of the screen size. My initial thought was to use an image as the background, but I need different colors for each page.
https://i.stack.imgur.com/9WTl6.png
Can this be accomplished using only background-color?
This is the current setup in HTML, TS & CSS:
<div [class]="getBackground(title)">
<div class="background-header">
<img [src]="'assets/assess/Custom.png'" alt="">
{{title}}
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let theme of pillar.data; let i = index">
<button rh-btn-theme full-btn [ngClass]="{'ripple': true}" [issue]="theme" (click)="presentModal($event, theme);"></button>
</div>
</div>
</div>
</div>
TS
getBackground(pillar) {
switch (pillar) {
case "People":
return "background-people";
case "Land":
return "background-land";
case "Crop":
return "background-crop";
case "Business":
return "background-business";
default:
return "background-custom";
}
}
CSS
.background-header {
width: 100%;
height: 80%;
display: block;
position: relative;
img {
display: inherit;
background-color: #000;
}
}
.background-people {
background-color: #335F6E;
}
.background-land {
background-color: #006533;
}
.background-crop {
background-color: #7F4020;
}
.background-business {
background-color: #F8DC0B;
}
.background-custom {
background-color: map-get($colors, primary);
}