image url in CSS

Question

I was just trying to change my site around a little, but I bumped into a problem which has never happened me before. I want to be able to test the site offline, so this problem is really annoying.

How come when i try to do this:

#logo{
    width:145px;
    height:41px;
    background:url('http://biscuithead.ie/images/logo.png') center no-repeat;                           
    display:block;
    float:left;
    cursor:pointer;
}

it works, but If I change the background line to:

background:url('/images/logo.png') center no-repeat;

or

background:url('images/logo.png') center no-repeat;

or

background:url(images/logo.png) center no-repeat;

or

background:url(/images/logo.png) center no-repeat;

it dosent work?

The image only seems to display through css when it is actually on the server

I am using DreamWeaver CS5.

Can anyone help we with this weird problem?

View page on localhost, see source code, post some info about your img src here. Its the correct path? — Otto
– Otto, Commented May 28, 2011 at 10:21
Where are the images in relation to your CSS? Is the CSS in a separate file? — Francis Gilbert
– Francis Gilbert, Commented May 28, 2011 at 10:21
If you could post a demonstration of this problem on your own server this would help us to see what's going wrong; it sounds like it's a file-paths problem, though. — David Thomas
– David Thomas, Commented May 28, 2011 at 10:22
but where are the css files in relation? have you tried ../images/logo.png? — Stuart Burrows
– Stuart Burrows, Commented May 28, 2011 at 10:28

J. Bruni · Accepted Answer · 2011-05-28 10:25:25Z

17

Be sure that the image file exists in your computer, and at the correct location.

Without the leading slash: images/logo.png is a path relative to the css file. If the css file is at /sites/example.com/css/styles.css, the image file must be at /sites/example.com/css/images/logo.png (inside the "css" folder)

With the leading slash: /images/logo.png is relative to the root folder of the site. If the css file is at /sites/example.com/css/styles.css, the image file must be at /sites/example.com/images/logo.png (inside the website root folder)

answered May 28, 2011 at 10:25

J. Bruni

20.5k13 gold badges80 silver badges93 bronze badges

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

10 Comments

Conor Taylor Over a year ago

But if the css file and the image are in the same folder, then logo.png by itself (no slashes, no index_files) should do the job? It dosent...

J. Bruni Over a year ago

@Conor: You mean background:url('logo.png') center no-repeat; and the logo.png image file at the same folder of the css file (or html file, if the css is inside it)... doesn't work? - Which browser are you using? Which operational system? And which HTTP server?

Conor Taylor Over a year ago

Yes. Im using safari on mac os. Its a zeus server

J. Bruni Over a year ago

Ah... Dreamweaver, so it is Windows, you're probably using IE (which version?)... you should try to see the web page by browsing to a localhost (not file:// and not from inside Dreamweaver)

J. Bruni Over a year ago

Forgot latest comment! So, you're using Safari / Mac / Zeus server - it is a very unknown environment for me.

|

Kalessin · Accepted Answer · 2011-05-28 10:37:24Z

1

A colleague had this problem because he wasn't testing on a local web server, he was loading the pages in the browser using file://.

answered May 28, 2011 at 10:37

Kalessin

2,3022 gold badges22 silver badges24 bronze badges

2 Comments

Conor Taylor Over a year ago

Yes, giving the direct link works, but that wont do once I put the website live

Kalessin Over a year ago

@Conor: Yes, I was suggesting that that was your problem. Obviously not.

Jason · Accepted Answer · 2011-05-28 10:57:38Z

0

I have had image problems previously, My solution is to use Mac OSX's inbuilt Apache Server. It is very simple to enable, go to System Preferences, Sharing and Tick Web Sharing You can then place files/folders in the Sites Folder in your home folder. To Access these files open your web browser and go to localhost/~Username/ There is an article here that goes into more detail about the process http://www.devarticles.com/c/a/Apache/Using-Apache-and-PHP-on-Mac-OS-X/

answered May 28, 2011 at 10:57

Jason

1007 bronze badges

Collectives™ on Stack Overflow

image url in CSS

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related