SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cannot display backgroun image

    I am having trouble displaying a background image on a web page and have no clue what's wrong. I am sure it's something simple that I just don't see. Here is the code:

    css
    #header{
    /*works*/
    background-color: yellow;
    /*does not work*/
    background-image: url('../pictures/solidgreen.jpg');

    /*moved jpg to root directory. does not work*/
    background-image: url('solidgreen.jpg');
    }

    index.html
    <div id="header">
    <p>This text displays in the header</p>;
    </div>

    The solidgreen.jpg file is a test file I created thinking there might be something wrong with the jpg file I am trying to display. Nothing works.

    Thanks for any suggestions or help with this simple, perplexing problem.

    Jim

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by caljim36 View Post
    /*moved jpg to root directory. does not work*/
    That's no use unless the css file is in the root folder too. Looks like a file path problem. Where is the css file in relation to the image? (That is, what's your file structure?) We could check for you if you post a link.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    If the image is in the root directory then you can reference it with /solidgreen.jpg, no matter where your CSS and HTML files are in the structure.

  4. #4
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am developing the site on my computer and don't have a link you can see. The css folder and pictures folder are both in the root directory. What I have is:
    Mywebsie
    index.html
    css folder
    pictures folder
    I believe it is a path problem, also, but I can't see what it is.
    Thank you.

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a copy of the jpg in the root directory.
    Is this correct notation:
    #header {
    background-color: yellow;
    background-image: /solidgreenjpg;
    }

    It does not display.

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A friend suggested I zip the directory on my computer and post it. You could see the whole website. It is not a large site at this point. Would that be helpful?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    What Stevie meant was this:

    Code:
    #header {
      background-color: yellow;
      background-image: url(/solidgreen.jpg);  
    }

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Actually, though, using

    Code:
    background-image: url(/solidgreen.jpg);
    locally won't work, unless you are using a server environment like WAMP or MAMP.

    The code that you posted initially should work if your folder structure is as you said.So yes, if you wish, zip the files and post them.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    This is EXACTLY why my directory structure ALWAYS points down-tree... if you have to root or uptree (../) it over something simple like a image link, you probably have your file structure needlessly convoluted. Images for CSS should be in a subdirectory of wherever the CSS is -- since they are inherently (or should be) presentational that also makes reskinning easier as you can swap out CSS images and the CSS (theme) without effecting the content.

    SERIOUSLY, if you have to start a URL in your CSS with "/" or "../" there is probably something horribly wrong with your directory structure.

  10. #10
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I uploaded the zip file, but I don't see it. I will check back and upload it again if it does not appearl

  11. #11
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have finally solved the problem. As all of you have suggested, it was a syntax issue. Thanks to all who gave me suggestions. I tried them all until I hit paydirt.


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
  •