6

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Shimmy MuffinPenguin Schwartz
  • 71
  • 2
  • 6

5 Answers5

6

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);
kapa
  • 77,694
  • 21
  • 158
  • 175
4

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.

Community
  • 1
  • 1
Liquid
  • 1,871
  • 1
  • 17
  • 32
  • It's indeed better to use body to start your css. – Sllix Jul 10 '12 at 08:10
  • 2
    +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. – kapa Jul 10 '12 at 08:13
  • 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. – Liquid Jul 10 '12 at 08:20
  • 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) – kapa Jul 10 '12 at 08:23
  • Tnx for pointing out the fail grammar. I'm also upvoting you because indeed it's the same. – Liquid Jul 10 '12 at 08:25
  • 2
    @Liquid, this is a great [**SO Answer**](http://stackoverflow.com/a/10947583/1195891) that describes your point of view for body and html when used with a background image. Cheers! – arttronics Jul 10 '12 at 09:04
  • 1
    @attronics indeed it describes it pretty well. :) tnx – Liquid Jul 10 '12 at 09:18
2

It may be your folder structure, try

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

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

Anurag Dabas
  • 23,866
  • 9
  • 21
  • 41
user15498459
  • 11
  • 1
0

.. 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 /.

Ari
  • 4,643
  • 5
  • 36
  • 52