Having trouble with CSS background image

Question

I'm trying to use a stock photo to cover my page. For some reason I cannot seem to get this to work. My image just refuses to cover the page.

#cover {
 background-image: url("https://i.sstatic.net/QE9pP.jpg");
 background-size: cover;
 background-size: center center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-color: #464646;
}
.cover-content {
 color: hsla(182, 100%, 28%, 1);
 font-family: font-family: 'Gravitas One', cursive;
 font-size: 400%;
 text-align: center;
}

<div id="cover">
 <div class="cover-content">
 <h1>Snowfall Design Studio</h1>
 </div>
</div>

• Just a student: Minor point, but worth mentioning even though your question is already answered: baclground-size: center center is invalid and should either be removed, or changed to background-position: center.

Answer 1

Your page does not cover the whole viewport. If you want an image to cover the whole screen, put the background-image on the html or body element

html {
 height: 100%;
}
body {
 min-height: 100%;
 background-image: url("https://i.sstatic.net/QE9pP.jpg");
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-color: #464646;
}
.cover-content {
 color: hsla(182, 100%, 28%, 1);
 font-family: font-family: 'Gravitas One', cursive;
 font-size: 400%;
 text-align: center;
}

<div id="cover">
 <div class="cover-content">
 <h1>Snowfall Design Studio</h1>
 </div>
</div>

• Just a student: background-size: center center is also invalid. May be a minor point, but worth mentioning I think.

Answer 2

Here is an example of the image covering the whole page: https://codepen.io/anon/pen/owJVgq

You needed to move the background images to the body tag and add a viewport of:

<meta name="viewport" content="width=device-width, initial-scale=1">

---

If you are looking for this section to be just a section and have more content below the picture, this is what you're looking for: https://codepen.io/anon/pen/BZvbNe

Again you need to add the viewport, but also add:

body {
 margin: 0px;
 padding: 0px;
}