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;
}

Ogden

Is your css file in a folder? – Beatty

Please show your HTML that you are using to load this external CSS file. Thanks. – Flux

If an answer helped it's a 'common' rule to accept it – Lynn

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);

Beatty

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.

Lynn

It's indeed better to use body to start your css. – Rori

+1, basically the same as my answer. Why do you say he should use body instead? In the current state of your answer, you are only spreading one more myth without an explanation. – Beatty

Indeed both answered at the same time too. Well it allows him 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 he's trying to do ofc. If he doesn't repeat his background there is a possibility that his picture doesn't use the whole page and then you should use the html tag. But in this case it gives the same solution. – Lynn

Yes. That's why I'm saying the sentence But it's better to use body instead of html. and then it's better to use body is simply wrong in its current form. Either put in an explanation, or simply remove that whole part. (also, I know we have answered at the same time, I just said that I'm upvoting, because your answer is just as good as mine) – Beatty

Tnx for pointing out the fail grammar. I'm also upvoting you because indeed it's the same. – Lynn

@Liquid, this is a great SO Answer that describes your point of view for body and html when used with a background image. Cheers! – Flux

@attronics indeed it describes it pretty well. :) tnx – Lynn

Answer 3

It may be your folder structure, try

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

Muzzy

I changed it to ../images/background-grid.jpg, it worked perfectly. Thanks for the answers! – Ogden

Don't forget to look into the other answers. – Lynn

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

Caledonian

Answer 5

.. this mean go one level up.

So, if your folder structure is like 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 is like this:

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

then, go up two levels to the image directory like below:

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

And so on. Just add up the .. followed by trailing slash /.

Underage