Q:

Background no responsive on Bootstrap

I have a problem with Bootstrap in a landing page that I made...
I have the following code
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Landing page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Bootstrap Core CSS -->

    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>

/* CSS used here will be applied after bootstrap.css */

body { 
 background: url('assets/img/4777.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-color: #851;  /* This color is for you to see the android problem. */
}

.panel-default {
 opacity: 0.95;
 margin-top:50px;

}
.form-group.last {
 margin-bottom:0px;
}

    </style>
</head>

<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>

                </div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9">
                                <div class="checkbox">
                                    <label class="">
                                        <input type="checkbox" class="">Να με θυμάσαι</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group last">
                            <div class="col-sm-offset-3 col-sm-9">
                                <button type="submit" class="btn btn-success btn-sm">Σύνδεση</button>

                            </div>
                        </div>
                    </form>
                </div>

                </div>
            </div>
        </div>
    </div>
</div>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</body>

</html>

Which and when i load it on my browser it plays perfect however i make the window small etc.
But when i load it from my Samsung galaxy s5 mini 
there is no responsivnes in the background.
It cuts the background in the middle and has white color on the next half of the page.
UPDATE 1
This problem is only detected in android smartphones with Chrome or Internet apps.
When someone tries it with iPhone it plays perfect!
This is the website
http://79.170.44.145/irem.co.vu/test-ptx/index.html
And the images from ANDROID are these.
iOS iPHONE

ANDROID CHROME BROWSER AND INTERNET ALSO

Any suggestions?

A:

Please try this:
html{
  height:100%;
  min-height:100%;
}
body{
  min-height:100%;
}

I found an article it sounds like the same problem which you have. Check it out here.

