How to get the background-image to show in the web browser?

How to get the background-image to show in the web browser?

I am making a webpage on basic smartphone photography and I spent a lot of
time trying to figure out why the background image didn't show up as it's
suppose to. I tested it by moving everything (index.html, screen.css, and
the image) to the desktop without directories and the background image
shows up. My final theory is that it doesn't show due to the directories
they were put in.
CORRECT DIRECTORY:
index.html > assets > css > screen.css
index.html > assets > img > Nokia-Lumia-1020.jpg
My HTML and CSS code is in jsfiddle:
http://jsfiddle.net/TheAmazingKnight/U5QnK/
CSS:
html{
background: url('assets/img/Nokia-Lumia-1020.jpg') no-repeat center center
fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
I also tried it in the body element, they both work without directories,
but in directories not. What could be wrong here?