Background image referenced by external css not loading

Question

I have this in an external css file, but it doesn't work at all. I would suggest that I spelled this incorrectly, but when it is placed domestically, it works fine. Any ideas on what might be happening?

html { background-image:url(images/background-grid.jpg); background-repeat:repeat; } 

Answer 1

I assume your CSS file is located in such a folder.

  /
         css /
             yourcss.css
         images /
             background-grid.jpg
         index.html

The paths specified in your CSS file are relative to the path to the CSS file (in the example, css folder). Therefore you should use .. :

 background-image: url(../images/background-grid.jpg); 

Answer 2

I think that you were not completely mistaken.

But it is better to use the body instead of html.

Explanation why use the body

This allows you to use overlay on top of the body tag. Like a mesh background on the body and a shadow on the side. But both are correct. Depending on what you are trying to do from.

If you do not repeat your background, there is a chance that your image will not use the whole page, and then you should use the html tag. But in this case, because of this, the same solution is repeated.

SO replay : tnx to attronics

Explanation of your "mistake"

If your images are located in a folder other than your html page (this should be so). You should use .. as a relative path to your css file.

Without .. this would mean that you are going to search for this image in the same folder as your html page.

 body{ background-image:url(../images/background-grid.jpg); background-repeat:repeat; } 

Here is a site that gives CSS Basics . Did not check the source though.

Answer 3

It could be your folder structure, try

 html { background-image:url(../images/background-grid.jpg); background-repeat:repeat; } 

Answer 4

.. that means the level is one level higher.

So, if your folder structure is this:

 image/ background.png css/ stylesheet.css 

then your css rule should be like this:

 html { background-image: url('../image/background.png'); } 

If your folder structure looks like this:

 style/ image/ bgr/ background.png css/ deeper/ stylesheet.css 

then go two levels to the image directory as shown below:

  html { background-image: url('../../image/bgr/background.png'); } 

Etc. Just add .. and then the trailing slash / .