时间戳

首页 > 解决方案 > 如何显示整页背景图片？

html - 如何显示整页背景图片？

问题描述

我正在为登录页面创建 HTML 设计。它工作得很好，但唯一的问题是：我无法在移动屏幕上显示背景图像。在大型桌面屏幕上，整个背景图像都可见，但在较小的屏幕上，背景图像仅显示一半。

请帮助我应该编辑什么以使背景图像始终适合屏幕，无论它有多大或多小？

登录.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

标签： htmlcss

解决方案

使用 Bootstrap 时，我永远不会弄乱容器（例如，background-image在.container类上放一个。我会在它的上方或下方创建一个全新的容器div。此外，您需要确保<div class="background">涵盖所有表单内容。如果没有't，那么这时候图像可能会发生一些奇怪的事情。

这解决了我的问题：

<div class="background">
    <div class="container-fluid">
        <!-- content goes here -->
    </div>
</div>

（可选）：我注意到.form-horizontal .form-groupBootstrap CSS 将表单推送到图像之外。我通过添加这种样式来解决这个问题：

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}

推荐阅读