CODEWITHSUNDEEP
htmlcss
Warriorsfury
Warriorsfury

Reputation: 65

Background image not covering 100% vertically

Currently trying to figure out why my background image is not covering the body fully. All the css is correct from what I can see, and i've tried looking other places for help. Below is a section of the code that needs to be reviewed, as well as a screenshot of what I am seeing. There is a little white section below the clouds that can be seen, even though the cloud image as a whole should be covering it. Any ideas?

The screenshot can be found here: here

<!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>

The following 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;
}

Upvotes: 0

Views: 60

Answers (1)

Johannes
Johannes

Reputation: 67738

use background-size: cover - that does what you want

Upvotes: 2

Related Questions