Adding background image in HTML5 Boilerplate

Question

I've recently downloaded html5 boilerplate and trying to get a good grasp on how to incorporate my css codes in side of the main.css of html5 boilerplate. I need to know how can I add my background image to my page?

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

Answer 1

Try this:

body {
  background-image:url(../Images/laptop.jpg) no-repeat center center fixed;
  // rest of your code
}

Your CSS file should be in the css folder and image should be in a different folder. Therefore, I used ../ before the path.

Here is a brief description of the file paths:

./ means the current directory

../ means the parent of the current directory, not the root directory

/ is the root directory

myfile.text is in the current directory, as is ./myfile.text

../myfile.text is one level above you and /myfile.text lives in your root directory.