image repeat doesn't work, why...?_问答_开发者

开发者 https://www.devze.com 2023-02-11 02:52 出处：网络

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:

相关专题：css

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 开发者_JS百科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 search path of the files usually begins in CSS file folder.

In your case, try putting the image in the same folder css or change the URL using relative paths.
If not, it may be a problem with the browser cache. Try clearing the browser data if does not work putting the image in the same folder as the CSS file.

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

try by putting the gif in the same directory as the css (and not the html)

I think the reference to the image in your CSS is relative to the CSS file. Try putting the image in the same folder as the CSS, or change the CSS rule to url('../yOJ_GIF_Tile.gif');