Background Only Applying to Half Page - html

Question

I am setting the Background of My application using ngStyle
like this <div [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >
But in One of my Components that gets loaded by router-outlet the data is less and only half page gets the background, in rest all other pages its fine.
How to solve this error.
The component Template where the data is less
<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 file of this component
.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;
}
For Ref My app component
<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);
}
}
How the component Loads up in browser

Answer 1

I don't know what you think this does
<div [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >
but here's the result in plain CSS:
{
background-image: url(photo);
height: 100%;
width: 100%;
margin: 0;
}
Now maybe you think that's supposed to make your background-image stretch to 100% width and height of the <div> but... it's really not.
If (photo) is smaller than the div, you must set your div's background-size property in order to make the image cover all background.
You should set it to cover.
Tip: Whenever you need help with CSS, if you skip the AngularJS part, and just ask: this is my resulting CSS, why isn't my picture full size? you drastically increase chances of getting a proper answer fast and it might even come from someone who doesn't know AngularJS (and who doesn't need to know it in order to help you).
If my answer doesn't solve your problem you need to create a minimal, complete and verifiable example, so we can inspect and see why your background-image doesn't apply. Whatever happens in your app, it still outputs HTML + CSS + JS. And that's what you need help with.