そのコンテナよりも大きな背景

Question

私はこのレイアウトを達成しようとしていますが、背景を設定する際に問題があります。これは画面サイズの50％にする必要があります。私は背景としてイメージを設定することを考えましたが、各ページで異なるはずの色があります。

だけbackground-colorを使用してそれを達成することは可能ですか？

これはこれまでのところ、私は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

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

はいあなたはbackground gradientことによってそれを行うことができます。

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

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

いけないgenarteクロスブラウザのCSSを忘れてしまいました。約background gradienthere

を参照してください