image repetition does not work, why and hellip;

advertisements

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:

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

      </div>
  </body>
</html>

And here is my CSS:

    root {
    display: block;
}

#header{
    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.

Thanks!!


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