Background image referenced in external css is not loading

Question

I have this in an external css file, but its not working at all. I would assume I'd written it wrong, but when placed internally, it works fine. Any ideas as to what might be going on?

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

Answer 1

I assume your CSS file is in a folder like this.

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

The paths given in your CSS file are relative to the path of the CSS file (in the example I given, the css folder). So you should use ..:

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

Answer 2

I think you didn't write it completely wrong

But it's better to use body instead of html.

Explanation why to use body

It allows you to use an overlay on top of that body tag. Like a grid-ish background on the body and a shade on the side. But both are correct. Depending on what you are trying to do ofc.

If you don't repeat your background there is a possibility that your picture doesn't use the whole page and then you should use the html tag. But in this case it gives the same solution because of that repeat.

SO replay: tnx to attronics

Explanation of your 'error'

If your images are in a different folder than your html page (which should be the case). You should use .. as relative path to your css file.

Without the .. it would mean that you are going to look for that 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 some Basics of CSS. Didn't check the source though.

Answer 3

It may be your folder structure, try

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

Answer 4

When we have these folders

css
img
and index.html

when we write css in style tag in index page which is called internal css then it works right but when we right css in styles.css in css folder then background img does not work.

because you move with in folder and path of background img does not work. so you have to write like this:

background-image: url('../img/bg.jpg');

then it will work properly