我的背景图片无法识别高度属性

弗朗切斯科·基亚里（Francesco Chiari）

我试图在此页面中将背景图像的高度设为100％，但似乎无法正常工作。我尝试了许多不同的方法，但似乎没有任何效果。

.signupbackground {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 0;
}

正确的代码如下所示。我也尝试过这个：

.signupbackground {
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 0;
}

我的身体和html已经具有100％的高度属性。

body, html {
font-family: "Roboto", sans-serif;
height: 100%;
position: relative;
background: #efefef;
color: black;
overflow-x: hidden;
}

这是HTML

<body>

<!-- Loader -->
<div class="fh5co-loader"></div>

<div id="fh5co-page">
    <section id="fh5co-header">
        <div class="container">
            <nav role="navigation">
            <h1 id="fh5co-logo"><a href="../index.php"><img id="logo01" src="../img/spredtlogo.png"></a></h1>
                <ul class="pull-right right-menu">
                    <li class="fh5co-cta-btn1"><a href="login.php">Log in</a></li>
                </ul>
            </nav>
        </div>
    </section>

    <section class="no-js-fullheight1" data-next="yes">
    </section>

    <!-- END #fh5co-hero -->
    <div class="signupbackground" style="background-image: url(../img/blur.jpg)">
       <div class="container">

    <div class="memberform">
<div id="msg"></div>
        <h3>Create a new account</h3>
        <h4>Take full advantage of all the new features</h4>

                <input type="text" id="first" placeholder="First Name">
                <input type="text" id="last" placeholder="Last Name">
                <div id="error_1"></div>
                <input type="text" id="email" placeholder="E-mail">
                <div id="error_2"></div>
                <input type="text" id="number" placeholder="Phone number">
                <input type="text" id="uid" placeholder="Username">
                <div id="error_3"></div>
                <input type="password" id="pwd" placeholder="Password">
                <div id="error_4"></div>
                <button class="signup-button" onclick="signup()">Create Account</button>

        <p>By choosing "Create Account" you are accepting to the <a href="termsofuse.php">terms and conditions.</a></p>
    </div>
        </div>
      </div>

<section id="secondary-footer">
    <div class="container">

        <div class="footer-element">
            <ul>
                <li>&copy; 2017 Spredt</li>
                <li><a href="../termsofuse.php">Terms of use</a></li>
                <li><a href="../jobs.php">Careers</a></li>
            </ul>
        </div>

    </div>
</section>
        <!-- END #fh5co-footer -->
    </div>
    <!-- END #fh5co-page -->


    </body>
</html>

但是看起来还是这样

我想摆脱那里的丑陋空间。我读过的另一件事是增加父div的高度，这样做了，它使图像变大了，但空间仍然存在。任何帮助将不胜感激，谢谢！

策克

分隔本身没有可调高度的事实导致背景图像变得像香蕉一样。的确，<html>and<body>标签的高度应为100％，但这还不够，因为图像未遵循这些标签的规则，而是遵循除法规则。因此，请使用CSScalc()函数。

另外，background-attachment: fixed;这不是必需的，但background-position: center;非常需要。

.signupbackground {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     z-index: 0;
     height: calc(100vh - /* header height + footer height in px */); // example: height: calc(100vh - 90px);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。