image repetition does not work, why and hellip;


I'll start out by saying that I'm totally new to CSS and HTML so no point in dumbing me down, ok.

Here is my HTML:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="res/yOJCascadeStyleSheet.css" rel="stylesheet" type="text/css">
      <div id="header">
          <img src="res/yOJheader.png">


And here is my CSS:

    root {
    display: block;

    background-image: url('yOJ_GIF_Tile.gif');
    background-repeat: repeat-x;


Now, the yOJ_GIF_Tile.gif is placed in the same folder as the html, and if I set the background to a specific color in the CSS that color is displayed. I've looked over tutorials on this and also previous questions here on StackOverflow and it looks as I have the same syntax as everyone else, but I don't get it to work... Can someone please help me out? I know there's a bunch of HTML & CSS gurus roaming this site... =)

EDIT: I should mention that its not only the repeat not working, the image isn't displayed at all. Its a 10 px X 200 px .gif image that I want to have repeated horizontally in the div background.


The problem might be more simple than you expect, though you're half-way towards your own solution:

yOJ_GIF_Tile.gif is placed in the same folder as the html

The problem is that the path you supplied url('yOJ_GIF_Tile.gif') is relative to the css file, not the html file.

Assuming your css file is in a folder in the same directory as the html file, you could try:

background-image: url('../yOJ_GIF_Tile.gif');

instead (the .. in a file path means, simply, 'go up to the parent directory of this directory).

Or you could simply move the image to the same directory as the css, of course...