Grow your CSS skills. Land your dream job.

[Solved] Background Image Not Showing

  • # January 25, 2010 at 10:21 pm

    Okay, so here’s the code I have:

    Code:
    body {
    font: 62.5% Helvetica, sans-serif;
    background: url(../images/bg.jpg) fixed no-repeat;
    }

    I have the background image saved in the images folder, obviously, as a jpeg. When I go to preview the HTML in Firefox, nothing is showing. What am I doing wrong?

    # January 25, 2010 at 10:24 pm

    Would be best if there was a demo URL we could see. Three things I can think of to check:

    1) The file name is EXACTLY right.
    2) The file path is EXACTLY right. This file path presupposes that the image folder is back up one level from where this CSS file is.
    3) The file is saved correctly. You didn’t like accidentally save the file in PNG format but just call it a JPG.

    # January 25, 2010 at 10:29 pm
    "chriscoyier" wrote:
    Would be best if there was a demo URL we could see. Three things I can think of to check:

    1) The file name is EXACTLY right.
    2) The file path is EXACTLY right. This file path presupposes that the image folder is back up one level from where this CSS file is.
    3) The file is saved correctly. You didn’t like accidentally save the file in PNG format but just call it a JPG.

    What do you mean when you say "This file path presupposes that the image folder is back up one level from where this CSS file is."?

    And how would I go about putting a demo URL in?

    # January 26, 2010 at 1:18 am
    "Rosey" wrote:
    I have the background image saved in the images folder, obviously, as a jpeg. When I go to preview the HTML in Firefox, nothing is showing. What am I doing wrong?

    You say you saved it as a "jpeg", but in your CSS you have written "jpg". Remember, these won’t be read as the same file!

    Rob
    # January 26, 2010 at 7:13 am

    as another note its also case sensitive. so image.jpg isn’t the same as image.JPG….

    As for the file question:

    typically people have a file structure like this

    public_html/css/style.css (public_html is the root folder where you put your files for the site – It is normally called something different on each host or even just shown as a "/").

    if you type this in your CSS – "background: url(images/bg.jpg)"

    your stylesheet will be trying to pull the images from public_html/css/images/bg.jpg – You just have to remember its finding the image relative to its file structure.

    when you do the magical ../ your jumping back up a level then trying to find the images folder.

    So background: url(../images/bg.jpg) would jump you up a level out of the css folder back into the htdocs or public html folder (whatever your host calls it) – and then look for the images folder… so you would be looking for:

    public_html/images/bg.jpg

    # January 26, 2010 at 7:23 pm

    I’m still not getting anything to show. What am I doing wrong? Everything, to my knowledge, is typed in properly and should be working. Here is all the code I have thus far.

    HTML

    Code:
    Heading here, keeping it private…

    CSS

    Code:
    * { margin: 0; padding: 0 }
    body {
    font: 62.5% Helvetica, sans-serif;
    background: url(images/bg.jpg) fixed no-repeat;
    }

    #page-wrap { width: 500px; margin: 0 auto; }

    Please help!

    # January 26, 2010 at 7:37 pm

    In your css that you just posted, it says:

    Code:
    background: url(images/bg-jpg) fixed no-repeat;

    That is not a correct file path. You have a hyphen where a period should be.

    # January 26, 2010 at 7:43 pm

    Thats my bad. I went to change the file name and put that in by accident.
    That didn’t solve anything. What could be wrong?

    # January 26, 2010 at 7:46 pm

    If you go http://www.yoursite.com/images/bg.jpg, does it show?

    What about

    http://www.yoursite.com/css/images/bg.jpg?

    Basically, if you find where the image is on the server, we can help a bit more!

    # January 26, 2010 at 7:49 pm

    I haven’t launched the updated site live yet.
    If I load the HTML file in Firefox, nothing shows.

    # January 26, 2010 at 7:58 pm

    So what folder do you have the image in? What is the hierarchy of your website? For example, my structure for an image like that would be:

    Root > images > my-image.jpg

    Others might be:

    Root > css > images > my-image.jpg

    You might have it:

    Root > images > some-cool-stuff > another folder > i-love-sports > backgrounds > my-image.jpg

    Because we don’t know how your folder structure looks, we can’t really know if you’ve just put the file in the wrong place, or if there’s an error in your coding.

    You’re looking for help, which is good, but you’re not giving us much to go on. The quickest way to get help is by posting a link to the site in question. You should have the site up on a dev server for testing anyways.

    # January 26, 2010 at 8:03 pm

    Here’s how my folder is set up:

    Site Name is the main folder sitting on my desktop. In the folder, I have the images folder, and the html and css files. The background image I want to use is in the images folder.

    # January 26, 2010 at 8:05 pm

    Okay, so then this should be fine:

    body {
    background: url(images/bg.jpg);
    }

    Try removed the "fixed", see what happens. I rarely use it myself, so I’m not sure, but it might be in the wrong order there.

    # January 26, 2010 at 8:11 pm

    Still nothing. This has never happened to me before…

    # January 26, 2010 at 8:12 pm
    "Rosey" wrote:
    Still nothing. This has never happened to me before…

    Are the rest of the styles from that style sheet being applied to the site?

    If you open up your index page in Firefox, then append /images/bg.jpg to it, do you see it?

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".