CODEWITHSUNDEEP
htmlcssangularbackgroundheight
YAS-MM
YAS-MM

Reputation: 1

angular component background image size problem

i'm begginer in web dev ,i have an issue with my angular component i try to make a background image , the body contains div's with *ngif directive when i make them visible the height of my body doesn't change and the window keep the old height size , so please can you show me how to fix this issue thank's here is some example of my code

<html>
  <body>
     <form [formGroup]="add_trader" >
         <ng-template [ngIf]="trader== true" >
            <div class="float-left" >
                <div class="card cards-shadown cards-hover rounded"  >

                        !!! some code
                </div>
            </div>
         </ng-template>
      </form> 

  </body>
</html>

my css file

body {
  background-image: url("https://images.unsplash.com/photo-1527176930608-09cb256ab504?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1353&q=80");
 
  height: 100%;
  width:  100%;


  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Upvotes: 0

Views: 976

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

change height:100% to min-height:100vh

body {
  background-image: url("https://images.unsplash.com/photo-1527176930608-09cb256ab504?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1353&q=80");
 
  min-height: 100vh;
  width:  100%;


  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Upvotes: 2

Related Questions