Question

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

请帮助我编辑一下，使背景图像始终适合屏幕，无论它有多小或多大？

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

Answer 1

使用Bootstrap时我不会弄乱容器（例如，在background-image类上加.container。我会在它上面或下面创建一个全新的div。此外，您需要确保<div class="background">涵盖所有表单内容。如果没有，那么图像时可能会出现时髦的事情。

这解决了我的问题：

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

（可选）：我注意到.form-horizontal .form-group Bootstrap CSS正在将图像推送到图像之外。我通过添加这种风格来解决这个问题：

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

Answer 2

.background {
    background: url(image url) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

这应该会有所帮助，请检查：Full Page Background Image

Answer 3

使用视口高度和视口宽度：

background-size: 100vh 100vw;

参见： http://www.tipue.com/blog/css3-vw-vh/

或尝试：

.background{
background-size: contain;
background-repeat: no-repeat
}

参见： https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 4

如果要查看该容器中的完整图像，请使用

.background {
   background-size:contain;
}

或者您想覆盖容器而不显示完整图像

.background {
   background-size:cover;
}

我使用以下代码作为背景图片

.background {
  height:98vh; /* view port height */
  width:100%;
  background:url(images.jpg) no-repeat;
  background-size:cover;
}

谢谢你

Answer 5

也许你需要这个

.background{
  height: 100%; 
  width: auto;
  background-image: url("7.jpg");
  background-attachment: fixed;
  background-repeat:no-repeat;
  background-size:100% 100%;
}

设置background-size: 100% 100%;

我忘了background-attachment: fixed;）

如何显示整页背景图像？

5 个答案: