无法删除页面底部的空白（移动设备）

Question

I am having a problem with the background image on my body tag. There is a white space on the bottom of the page when viewed on mobile.

Here is my css code:

     body { 
  background:  url("/images/laptop_bg.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Proxima Nova', Georgia, sans-serif;
 }

html{
  height: 100%;
}

The solutions I found on stack-overflow does not work. Any help would be appreciated. Thanks

Answer 1

Set height: 100vh; to html AND TRY background-size: 100% 100%;

  body { background: url("https://material.angular.io/assets/img/examples/shiba1.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 100% 100%; background-repeat: no-repeat; } html{ height: 100vh; } 

Answer 2

For your body tag, set the CSS as follows for a full display of the background-image .

body {

width: 100%;
background-image: url("/images/laptop_bg.jpg");
background-position: 0%, 0%, 50%, 50%;
background-size: auto, cover;
background-repeat: no-repeat;
font-family: 'Proxima Nova', Georgia, sans-serif;

}