CODEWITHSUNDEEP
htmlcssresponsive-designresponsive-images
Konstantinos Natsios
Konstantinos Natsios

Reputation: 2924

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 iOS iPHONE

ANDROID CHROME BROWSER AND INTERNET ALSO ANDROID CHROME BROWSER AND INTERNET ALSO

Any suggestions?

Upvotes: 2

Views: 286

Answers (2)

Mario Kurzweil
Mario Kurzweil

Reputation: 480

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.

Upvotes: 1

alcfeoh
alcfeoh

Reputation: 2257

If you want the background image to scale based on the size of the browser window:

background-image:url('assets/img/4777.jpg');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Upvotes: 0

Related Questions