背景图像没有出现

Question

I am using the following css file to generate a simple layout as a test:

@font-face {
    font-family: blackboard;
    src: url('../fonts/KGTenThousandReasons.ttf');
}

body {
    font-family: blackboard;
    font-size: 1.3em;
    color: #FFF;
    margin: 0px;
}

html {
    background-image: url('../images/Chalkboard.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.container {
    margin: 0 auto;
    width: 980px;
}

#header {
    text-align: center;
    margin-top: 15px;
}

#header p {
    font-size: 0.5em;
}

#left_column {
    float: left;
}

#right_column {
    float: right;
}

.list {

}

.list li {
    margin: 5px;
}

.list ul {
    list-style-type: none;
    font-size: 0.7em;
}

.list2 {
    position: relative;
    width: 200px;
    list-style-type: none;
    top: 75px;
    right: 100px;
    font-size: 0.6em;
    float: left;
}

.clear_both {
    clear: both;
}

#footer {
    width: 100%;
    height: 50px;
    font-size: 0.5em;
}

.small_container {
    position: relative;
    top: 25%;
    height: 100%;
    text-align: center;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    color: gray;
}

.selected {
    color: gray;
    font-weight: bolder;
}

.paginate {
    border: 1px solid whitesmoke;
    padding-left: 10px;
    padding-right: 10px;
    margin: 5px;
}

#pagination {
    padding-top: 10px;
}

h1 {
    font-size: 1.1em;
}

The problem I am having is that the background image of the html tag will not show up when I upload it to my hosting service. It works perfectly on my local machine. The line I am specifically talking about are these:

html {
        background-image: url('../images/Chalkboard.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

The fonts come out fine and everything else is great just the background image will not produce a result. Any help would be great.

Answer 1

Change "background-image" to "background".

html {
        background: url('../images/Chalkboard.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

Answer 2

Are you sure the path to your image is correct? You did not by accident forget to upload it, or uploaded it to a different folder then on your local machine... Check it in the chrome inspector to see if the browser can actualy find the image. Or try to set an absolute path to the image in stead of a relative one.