[Solved] Background Image Not Showing

[Rosey]

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?

[Chris Coyier]

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.

[Rosey]

"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?

[TheDoc]

"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 MacKay]

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

[noahgelman]

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.

[Rosey]

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?

[TheDoc]

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!

[Rosey]

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

[TheDoc]

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.

[Rosey]

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.

[TheDoc]

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.

[Rosey]

Still nothing. This has never happened to me before…

[TheDoc]

"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?

[Rosey]

"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?

[Author]

Posts