фона Только Применяя к полстраницы

Question

Я устанавливаю на фоне моего приложения с помощью ngStyle

как этот <div [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >

Но в одном из моих компонентов, которая загружается маршрутизатор-выходом данных меньше, и только половина страница получает фон, в остальном все остальные страницы в порядке.

Как решить эту ошибку.

компонент шаблона, где данные меньше

<div *ngIf="visibleTournament"> 
    <div class = "row"> 
    <div *ngFor="let entry of competitionTeams | keys"> 
     <div class="col-md-4" (mouseleave)= "entry.hideme = false"> 
     <div> 
      <div (click) = "entry.hideme = !entry.hideme" > 
      <div class = "groupBox"><div class="placed"><h3><span class = "label label-warning">Group - {{entry.key}}</span></h3></div></div> 
      </div> 
      <div class="well box" [hidden] = "!entry.hideme"> 
      <table class="table"> 
       <thead class="thead-inverse"> 
       <tr> 
       <th>#</th> 
       <th>Team</th> 
       <th>Played Games</th> 
       <th>Points</th> 
       <th>Goals</th> 
       <th>GA</th> 
       <th>GD</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr *ngFor="let subValue of entry.value"> 
       <th scope="row">{{subValue.rank}}</th> 
       <td><img class="img-thumbnail small" src="{{subValue.crestURI}}">{{subValue.team}}</td> 
       <td>{{subValue.playedGames}}</td> 
       <td>{{subValue.points}}</td> 
       <td>{{subValue.goals}}</td> 
       <td>{{subValue.goalsAgainst}}</td> 
       <td>{{subValue.goalDifference}}</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS файл этого компонента

.avatar{ 
    width:30px; 
    height:30px; 
    margin-right: 10px; 
    background: rgba(0,0,0,0); 
    border: none; 
} 

.inline{ 
    display: inline-block; 
    margin: 10px 20px; 
} 

.check{ 
    min-width: 500px; 
} 

.selector{ 
    cursor: pointer; 
} 
.placed{ 
    margin: 0 auto; 
} 

.box{ 
    /*position: absolute;*/ 
    text-align: center; 
    background: #ccffda; 
    padding: 10px 20px; 
    max-width: 500px; 
    border: darkgray 1px solid; 
    z-index: 1; 
} 


.groupBox{ 
    /*position: relative;*/ 
    text-align: center; 
    background: rgba(0,0,0,0.3); 
    padding: 20px 20px; 
    margin: 2px; 
    border: darkgray 1px solid; 
    cursor: pointer; 
} 

th { 
    white-space: nowrap; 
} 

.col-md-4{ 
    margin-bottom: 80px; 

} 

.fix{ 
    position: absolute; 
} 

.group{ 
    /*background: rgba(0,0,0,0.4);*/ 
} 
table th { 
    font-weight: bolder; 
    /*color:#49fb35;*/ 
} 

.small{ 
    width:20px; 
    height:20px; 
    background: rgba(0,0,0,0); 
    border: none; 
} 

Для Ref Мое приложение компонент

<div [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" > 
    <nav class="navbar navbar-inverse"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" routerLink = "home">Football Data</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </nav> 

    <div class = "container"> 
    <div class = "row"> 
     <div class = "col-md-12"> 
     <div *ngIf="loading"> 
      <!-- show something fancy here, here with Angular 2 Material's loading bar or circle --> 
      <div class = "parent"> 
      <div class="spinner"> 
       <div class="rect1"></div> 
       <div class="rect2"></div> 
       <div class="rect3"></div> 
       <div class="rect4"></div> 
       <div class="rect5"></div> 
      </div> 
      </div> 
      <!--<progress-bar [value]="50" [max]="100"></progress-bar> // Simple Progess Bar--> 
     </div> 
     <router-outlet></router-outlet> 
     </div> 
    </div> 
    </div> 
</div> 

Appcomponent Css

html, body{ 
    height: 100%; 
    font-family: Arial, Helvetica, sans-serif 
} 

a.active { 
    background-color: gray; 
} 

h1 { 
    color: #00BCD4; 
} 


.parent{ 
    position: fixed; 
    left:0; 
    right:0; 
    top: 0; 
    bottom: 0; 
    background: rgba(0,0,0,0.1); 
    display: flex; /* establish flex container */ 
    flex-direction: column; /* make main-axis vertical */ 
    justify-content: center; /* align items vertically, in this case */ 
    align-items: center; /* align items horizontally, in this case */ 
} 

.spinner { 
    margin: 100px auto; 
    width: 50px; 
    height: 40px; 
    text-align: center; 
    font-size: 10px; 
} 



.spinner > div { 
    background-color: black; 
    height: 100%; 
    width: 6px; 
    display: inline-block; 

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; 
    animation: sk-stretchdelay 1.2s infinite ease-in-out; 
} 

.spinner .rect2 { 
    -webkit-animation-delay: -1.1s; 
    animation-delay: -1.1s; 
} 

.spinner .rect3 { 
    -webkit-animation-delay: -1.0s; 
    animation-delay: -1.0s; 
} 

.spinner .rect4 { 
    -webkit-animation-delay: -0.9s; 
    animation-delay: -0.9s; 
} 

.spinner .rect5 { 
    -webkit-animation-delay: -0.8s; 
    animation-delay: -0.8s; 
} 

@-webkit-keyframes sk-stretchdelay { 
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
    20% { -webkit-transform: scaleY(1.0) } 
} 

@keyframes sk-stretchdelay { 
    0%, 40%, 100% { 
    transform: scaleY(0.4); 
    -webkit-transform: scaleY(0.4); 
    } 20% { 
     transform: scaleY(1.0); 
     -webkit-transform: scaleY(1.0); 
    } 
} 

Как компонентные нагрузки в браузере

Answer 1

Я не знаю, что вы думаете, что делает

<div [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" > 

но вот результат в простом CSS:

{ 
    background-image: url(photo); 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

Теперь, может быть, вы думаете, что это должно сделать ваш background-image стрейч до 100% ширина и высота <div>, но ... это действительно не так.

Если (photo) меньше, чем div, вы должны установить свойство div background-size, чтобы изображение обложки всех фона.

Вы должны установить его на cover.

---

Совет: Всякий раз, когда вам нужна помощь CSS, если вы пропустите AngularJS часть, а просто спросить: это мой полученный CSS, почему это не моя картина полный размер? вы резко увеличиваете шансы получить правильный ответ быстро, и это может произойти от кого-то, кто не знает AngularJS (и кому не нужно это знать, чтобы помочь вам).

---

Если мой ответ не решает проблему вам нужно создать минимальный, полный и проверяемый пример, поэтому мы можем проверить и понять, почему ваш background-image не применяется. Что бы ни случилось в вашем приложении, оно все еще выводит HTML + CSS + JS. И вам нужна помощь.