Hintergrund größer als sein Container

Question

Ich versuche, dieses Layout zu erreichen, aber ich habe Probleme mit der Einstellung eines Hintergrunds, der 50% der Bildschirmgröße betragen sollte. Ich dachte daran, ein Bild als Hintergrund einzurichten, aber es gibt verschiedene Farben, die auf jeder Seite unterschiedlich sein sollten.

Ist es möglich, nur background-color mit erreichen? Diese

ist, wie ich die HTML gesetzt, TS & CSS bisher:

<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

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); 
    } 

Answer 1

Ja, Sie können es tun, indem background gradient:

.content { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: solid 2px #123; 
 
    background: linear-gradient(red, red 50%, white 50%, white); 
 
}

<div class='content'></div>

Vergessen Sie nicht genarte Cross-Browser CSS. Siehe etwa background gradienthere