In your background image and your stylesheet reference, you're using absolute paths (paths that begin with the forward slash). On a website, an absolute path instructs the browser to go looking for a resource at the root.
So let's imagine I have a website with the following structure:
index.html
css/
screen.css
images/
main-back.png
project/
sample.html
And I'm adding the following HTML to project/sample.html:
<img src="/images/main-back.png" />
To find the image, the browser will first go to the root directory, then look for the images directory, and then look for main-back.png. Alternatively, you can use relative paths:
<img src="images/main-back.png" />
Without the forward slash, the browser will start in the project directory (where sample.html is located) and look in vain for an images folder. This will result in no image displaying. To fix it, we tell the browser to first navigate up a directory:
<img src="../images/main-back.png" />
This is basically the same thing as our first example, except we're using a relative path instead of an absolute path.
Now, the problem you are facing is that you're opening the page up on your own computer. In this case, there is no root web directory, so you'll need to use relative paths instead of absolute paths. So, for your stylesheet reference, you can use:
<link rel="stylesheet" type="text/css" href="css/mystyles.css" media="screen" />
Start from index.html, look for the css directory in the same directory, and then find mystyles.css within that directory.
For your CSS image reference, the key thing to remember is that paths within CSS files are relative to the CSS file itself. So you'll need the following:
background-image:url('../images/mybackgroundimage.png');
Start from mystyles.css, move up a directory, look for the images directory, and then find mybackgroundimage.png in that directory.
