When I put an image I try to make it occupy the entire body but it leaves blank spaces.

My code is this:

<div style="background-image: url('../assets/img/food-with-ingredients.jpg'); -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover !important; 
   background-repeat:no-repeat !important;">

My image stays like this.

My image

Thank you

CodePudding user response：

You could try set the min-height of this div to be the remaining size of the screen.

The remaining size can be got by doing a calc() of 100vh minus the height of the navigation bar.

Example:

<div
  style="
    min-height: calc(
      100vh - 80px
    ); /*