Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #27732
    Rosey
    Member

    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?

    #70021
    Chris Coyier
    Keymaster

    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.

    #70022
    Rosey
    Member
    "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?

    #70024
    TheDoc
    Moderator
    "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!

    #70028
    Rob MacKay
    Participant

    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

    #70054
    noahgelman
    Participant

    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.

    #70055
    Rosey
    Member

    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?

    #70056
    TheDoc
    Moderator

    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!

    #70057
    Rosey
    Member

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

    #70059
    TheDoc
    Moderator

    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.

    #70060
    Rosey
    Member

    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.

    #70061
    TheDoc
    Moderator

    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.

    #70062
    Rosey
    Member

    Still nothing. This has never happened to me before…

    #70063
    TheDoc
    Moderator
    "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?

    #70026
    Rosey
    Member
    "TheDoc" wrote:
    "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?

    How would I do that?

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.