CSS: Setting background-image in CSS

Question

What is the correct syntax when setting the background-image in CSS? In visual studio, there seems to be no problem in the background since it appears. But in the browser like IE or FF, the background does not appear. is there something i missed here?

syntax i am using is below (which i think is correct...)

#headerArea
{
    height: 150px;
    background-image: url('/images/bgimage.jpg');
}

the above is correct right?

Can you give us an idea of the file structure? Where is your CSS relative to your image on your hard drive? — Tyson
– Tyson, Commented Mar 16, 2009 at 18:36
the CSS file is inside the "styles" folder in the root directory and the image file is inside the "images" folder in the root directory. so basically, they are separated. — jerbersoft
– jerbersoft, Commented Mar 17, 2009 at 0:35

Draco · Accepted Answer · 2009-03-23 11:54:05Z

8

Depending on your folder structure and where the CSS is located relative to the images it is using you will have to go up to the root level of the image directory and access it from there so you could maybe try something like

background-image: url('/../images/bgimage.jpg');

edited Mar 23, 2009 at 11:54

answered Mar 16, 2009 at 8:11

Draco

16.4k23 gold badges82 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jerbersoft Over a year ago

gotcha! but i used: background-image: url('../images/bgimage.jpg'); without the first "/". so at least you gave me an idea. thanks!

googlesearchsentmehere · Accepted Answer · 2011-02-08 20:55:21Z

7

i got mine working w/ ../images/bgimage.jpg

how? i did NOT use quotes - ex:

background-image: url(../images/bgimage.jpg);

answered Feb 8, 2011 at 20:55

googlesearchsentmehere

1892 gold badges3 silver badges6 bronze badges

1 Comment

Marc Sloth Eastman Over a year ago

worked for me but had to remove whitespace from file name

Tyson · Accepted Answer · 2009-03-16 07:47:19Z

6

If you're testing on a local machine without using a web server (i.e. if the URL of your page in FF starts with "file://", that url wont work. You'll want to specify a relative path to the image because otherwise it'll be looking for that image at the root of your hard drive.

So if your files are like this:

/some/path/html/index.html
/some/path/html/images/bgimage.jpg

Your code will look like:

background-image: url('images/bgimage.jpg');

answered Mar 16, 2009 at 7:47

Tyson

6,2543 gold badges34 silver badges37 bronze badges

3 Comments

jerbersoft Over a year ago

this is exactly the setup. it is relative.

Vegard Larsen Over a year ago

Remember that the image path in the CSS is relative to the location of the CSS file, not to the HTML file. So you might need to do ../images/bgimage.jpg if your CSS file is in subfolder.

Chuck Over a year ago

@jerbersoft: That is NOT the code you posted in your question. You used the absolute path url('/images/bgimage.jpg'). Note the leading slash. Were you mistaken in the question?

user57365 · Accepted Answer · 2009-03-16 07:46:46Z

4

That's correct syntax. Have you checked whether the image is in the right location?

answered Mar 16, 2009 at 7:46

user57365

5 Comments

jerbersoft Over a year ago

i have checked and in Visual Studio, there is no problem because the background image appears normally. the problem is when I run it, in FF and IE, the background does not appear.

user57365 Over a year ago

Since I don't have enough reputation yet, I'll respond to your comment on Philippe's answer: yes, the background would disappear in Visual Studio. However, when you view the page in FF/IE, does it appear?

jerbersoft Over a year ago

background-image: url('images/bgimage.jpg'); removing the first "/" does not work either.

Julian Aubourg Over a year ago

If you're using an external css stylesheet, verify its url in the <link> tag in the <head> section of your html code.

jerbersoft Over a year ago

the CSS file's url is verified correct since it can be used in VS.

Igor Pavelek · Accepted Answer · 2009-03-16 08:01:47Z

3

And remember, relative path is relative to the CSS sheet.

answered Mar 16, 2009 at 8:01

Igor Pavelek

1,44414 silver badges22 bronze badges

Comments

Philippe · Accepted Answer · 2009-03-16 07:47:48Z

2

If it is a relative path, remove the heading "/" in the url path?

answered Mar 16, 2009 at 7:47

Philippe

4,0613 gold badges44 silver badges57 bronze badges

1 Comment

jerbersoft Over a year ago

when i try removing the "/", in Visual Studio, the background disappears so i think the "/" is required (or is it?). btw, i am using VS 2008 SP1.

Julian Aubourg · Accepted Answer · 2009-03-16 07:47:36Z

1

Are you certain about the / at the beginning of the url? Aren't you trying to reach the image in the "images" subdirectory... which would imply url('images/bgimage.jpg')?

answered Mar 16, 2009 at 7:47

Julian Aubourg

11.4k1 gold badge31 silver badges29 bronze badges

2 Comments

jerbersoft Over a year ago

yes, I am reaching for the image file in the "images" subdirectory.

Julian Aubourg Over a year ago

then change the url by removing the first / :)

CounterSpell · Accepted Answer · 2013-05-05 10:43:32Z

1

My CSS file is in "Themes" folder. The images are saved in "Images" folder. Both "Themes" and "Images" are sub-folders under the root directory of my project.

In this case you should use

background-image: url(../Images/imageName.jpg);

answered May 5, 2013 at 10:43

CounterSpell

1231 silver badge8 bronze badges

Collectives™ on Stack Overflow

CSS: Setting background-image in CSS

8 Answers 8

1 Comment

1 Comment

3 Comments

5 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

3 Comments

5 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related