I'm creating an HTML design for a sign-in page. It's working quite well and good but the only problem is: I'm unable to display the background image on mobile screens. On large desktop screens the whole background image is visible but on smaller screens the background image is showing only half. 

Please help me what I should edit to make the background image always fit the screen no matter how small or large it is?

**signin.html**

```
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>

        body, html {
            height: 100%;
            margin:0;
        }

        .background{
            height: 100%; 
            background-image: url("7.jpg");
            background-position: center;
            background-repeat:no-repeat;
            background-size:cover;
        }

    </style>
</head>

<body>

    <div class="container-fluid background">

        <br><br>
        <h2 class="text-center" style="color:orange">Register</h2>

        <div>
            <form class="form-horizontal">

                <div class="form-group">

                    <label class="control-label col-sm-2" for="email" style="color:orange">Name:</label>

                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="email" placeholder="Enter Name" name="email" style="width:80%">
                    </div>

                </div>

                <div class="form-group">

                    <label class="control-label col-sm-2" for="pwd" style="color:orange">Username:</label>

                    <div class="col-sm-10">          
                        <input type="password" class="form-control" id="pwd" placeholder="Enter Username" name="pwd" style="width:80%">
                    </div>

                </div>

                <div class="form-group">

                    <label class="control-label col-sm-2" for="pwd" style="color:orange">E-mail:</label>

                    <div class="col-sm-10">          
                        <input type="password" class="form-control" id="pwd" placeholder="Enter E-mail" name="pwd" style="width:80%">
                    </div>

                </div>

                <div class="form-group">

                    <label class="control-label col-sm-2" for="pwd" style="color:orange">Password:</label>

                    <div class="col-sm-10">          
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" style="width:80%">
                    </div>

                </div>

                <div class="form-group">

                    <label class="control-label col-sm-2" for="pwd" style="color:orange">Confirm Password:</label>

                    <div class="col-sm-10">          
                        <input type="password" class="form-control" id="pwd" placeholder="Confirm Password" name="pwd" style="width:80%">
                    </div>

                </div>

                <div class="form-group">

                    <label class="control-label col-sm-2" for="pwd" style="color:orange">Upload image:</label>

                    <div class="col-sm-10">          
                        <input type="file"  id="pwd" placeholder="Enter password" name="pwd" style="width:80%">
                    </div>

                </div>

                <div class="form-group">        
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-danger">Sign up</button>

                    </div>
                </div>

            </form>
        </div>

    </div>

</body>
</html>

```

[JSFiddle](https://jsfiddle.net/pz7yxz53/)