SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Background-Image Not Working

    This is valid right?:

    background-image: url('files/images/footer.gif');

    When I do that, nothing shows up in the background. I'm 200% sure that's the right directory and file.

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems logical that would be right, but I don't think you need the single quotes. Try removing them and see if it fixes your problem.
    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, still doesn't work... how do you set the background image of a div in html, is it just <div background="files/images/footer.gif">? I'll try that and see if that works.

  4. #4
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That didn't work either...

  5. #5
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I put it into body, then it works, just not in footer...

  6. #6
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try dropping the files/ and see if this works...I store all my images in a file named images and code my background images in my style sheet... Heres the css code

    #header {
    background: url('images/image.gif') no-repeat center;
    }

  7. #7
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... still not working.

  8. #8
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    background-color doesn't work either. That's gotta say something...

    EDIT: Just kidding, I didn't have it set to any size. But images still don't work for any divs on my site.

  9. #9
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, that's rather odd then, try the absolute directory instead of relative directory then. And if that still doesn't work, then it has to be the actual directory name problem. One possible issue is the name of your file. You mentioned 'footer.gif', always note that some programs tend to output files in UPPERCASE extension names, so the actual name might be 'footer.GIF', and that would cause the difference.
    In search of the clouds...and maybe some work

  10. #10
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've gotta go eat dinner, but I'll try those things when I get back. In the mean time, here's all the code:
    Code:
    <html>
    <head>
    <link rel="stylesheet" href="styles/style.css"/>
    </head>
    <body>
    <center>
    	<div id="page">
    	<div id="header">
    	<a href="index.html"><img src="files/images/logo.gif"></a>
    	</div>
    	<div id="content">
        <h1>Index</h1>
        <center>
        <a href="asteroids.html"><img src="games/ab/ablogo.gif"></a><br>
        <br><a href="cobra.html"><img src="games/cobra/coblogo.gif"></a><br>
        <br><a href="zetrix.html"><img src="games/zetrix/zetlogo.gif"></a><br>
        </center>
    	</div>
    	<div id="foot">
    	</div>
    	</div>
    </center>
    </body>
    Code:
    #page
    {
    	border: 4px dotted darkgray;
    	width: 600px;
    	height: 706px
    }
    
    body
    {
    	background-color: black;
    }
    img
    {
    	border: 0;
    }
    
    #header
    {
    	width: 600px;
    	height: 100px;
    }
    
    #content
    {
    	background-color: #efefef;
    	height: 500px;
    	width: 600px;
    	border-top: dotted black;
    	border-bottom: dotted black;
    }
    
    #foot
    {
    	background-image: url(footer.gif);
    	height: 100px;
    }

  11. #11
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OH haha ignore my post above, I see the issue here. Your css file is stored under the css folder in the root directory, and by simply referring it to files/images/footer.gif would actually mean root/css/files/images/footer.gif instead of root/files/images/footer.gif as intended.

    The fix here is to add '../' to direct the directory back to the root, so it will connect to the correct directory.

    Code:
    #foot
    {
    	background-image: url(../files/images/footer.gif);
    	height: 100px;
    }
    In search of the clouds...and maybe some work

  12. #12
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh duh!!! lol. Thanks for pointing that out!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •