Question

目前正在试图弄清楚为什么我的背景图像没有完全覆盖身体。从我能看到的所有css都是正确的，我已经尝试寻找其他地方寻求帮助。以下是需要审核的代码部分，以及我所看到的截图。虽然云图像作为一个整体应该覆盖它，但在云层下面可以看到一个小的白色部分。有什么想法吗？

可在此处找到屏幕截图：

<!doctype html>
<html lang="">
    <head>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <script src="js/jquery-1.12.1.js"></script>
      <script src="js/js1.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div id="socialmediaicons">
                    <img src="img/fb.png">
                    <img src="img/twitter.png">
                    <img src="img/g+.png">
                </div>
                <h1>COMPUTER +</h1>
                <h3>Services for both home, and business</h3>
            </div>
            <div id="sectionMain">
            </div>
        </div>
   </body>
</html>

以下css：

@import url(https://fonts.googleapis.com/css?family=Martel+Sans);
@import url(https://fonts.googleapis.com/css?family=Oswald);

* {
    padding: 0;
    border: 0;
    margin: 0;
    font-family: 'Martel Sans', sans-serif;
}
body {
    background-image: url( ../img/backg.jpg );
    background-position-x: center;
    background-position-y: top;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
}

/*
 __        __                                             
 \ \      / /  _ __    __ _   _ __    _ __     ___   _ __ 
  \ \ /\ / /  | '__|  / _` | | '_ \  | '_ \   / _ \ | '__|
   \ V  V /   | |    | (_| | | |_) | | |_) | |  __/ | |   
    \_/\_/    |_|     \__,_| | .__/  | .__/   \___| |_|   
                             |_|     |_|                  
*/

#wrapper {
    width: 85vw;
    margin: 0 auto;
}

/*
  _   _                      _               
 | | | |   ___    __ _    __| |   ___   _ __ 
 | |_| |  / _ \  / _` |  / _` |  / _ \ | '__|
 |  _  | |  __/ | (_| | | (_| | |  __/ | |   
 |_| |_|  \___|  \__,_|  \__,_|  \___| |_|   

*/

#socialmediaicons {
    width: 15%;
    margin: 0 auto;
}
#socialmediaicons img {
    width: 35px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
}
#header {
    height: 830px;
}
#header h1 {
    text-align: center;
    font-size: 120px;
    padding-top: 25px;
    margin-top: 160px;
    letter-spacing: 5px;
    color: white;
    text-shadow: 2px 2px 2px black;
}
#header h3 {
    text-align: center;
    padding-top: 10px;
    font-size: 18px;
    padding-bottom: 10px;
    color: white;
    text-shadow: 2px 2px 2px black;
}

Answer 1

使用background-size: cover - 做你想做的事

背景图像不垂直覆盖100％

1 个答案: