css - 网页的响应能力在所有设备中

Question

我在这里创建了以下页面我添加了一张背景图片，这个页面在所有设备上都不是响应式的。
我做错了什么？我使用了 Bootstrap 。我希望该图像也应该在所有设备中响应。我不希望在移动 View 中显示完整图像。但是当我在移动 View 中看到它应该很好看。< br/> 请帮我。

<div class="container">
   <section class="col-lg-12">
        <div class="alert alert-danger col-lg-4 invalidData">
            <span class="close" data-dismiss="alert">&times;</span>
            <strong id="errorMessage">Missing required field!</strong>
        </div>
    </section>

    <section class="col-lg-5 col-md-5 col-xs-12 formBorder padding">
        <header class="loginHeader">Login To Go</header>
        <form method="post" action="" name="login" id="login" class="paddingTopBottom">
            <div class="col-lg-12 col-md-12 col-xs-12 fieldPadding">
                <input type="text" class="col-lg-12 col-md-12 col-xs-12" name="email" id="email" placeholder="Enter email here">
            </div>
            <div class="col-lg-12 col-md-12 fieldPadding">
                <input type="password" class="col-lg-12 col-md-12 col-xs-12" name="pwd" id="pwd" placeholder="Enter password here">
            </div>
        </form>
            <div class="col-lg-12 col-md-12 col-xs-12 fieldPadding">
                <input type="submit" class="col-lg-12 col-md-12 col-xs-12 btn btn-info" name="submit" id="submit" value="Go With Credentials" onclick="checkDetails()">
            </div>
    </section>
</div>

https://jsfiddle.net/pszex85n/

Answer 1

伙计们，我没有在标题中添加这一行，这就是我出现一些错误的原因

<meta name="viewport" content="width=device-width,initial-scale=1">

我通过更改以下 css 获得了良好的移动 View 背景

background-position: 53% 100%;