css works inline but not in a css file

**Richiedude** · 12-09-2009, 09:58 PM

How come some css works in a css file and some doesn't?

in particular - using background-image: url('path to image')??

when i inlclude it in style tags in the document, it works?

but when i move it to the css file - it doesn't!

ideas?

is it a document type issue?

**bluewalrus** · 12-09-2009, 10:34 PM

Post your code or a link.

**Richiedude** · 12-10-2009, 11:43 PM

this works . . .

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
...(more stuff)
<link rel="stylesheet" type="text/css" href="css/main.css">
...(more stuff)
</head>
.
.
.
<style>
#topsection{
background-color: #3399cc;
background-image: url('images/banner-back.gif');
height: 65px; /*Height of top section*/
}
</style>

.
.
.

<div id="maincontainer">

<div id="topsection">
	<div class="innertube">
		<div id="logoimage">
    	<img border="0" src="images/howto-algebra.png" width="250" height="65">
    	</div>
	</div>
</div>
.
.
.
[more stuff]

. . . but when the code in the style tags is moved into the css file, the background for the topsection div no longer works.

**bluewalrus** · 12-11-2009, 12:01 AM

so the main.css doesn't work in this example but the #topsection (you should put this in the head of the document, unless you cant) does?

Whats is your directory structure like?

If this page is located at

http://www.domain.com/test/this_page.html

then this main.css should be in

http://www.domain.com/test/css/main.css

if you want it from the root call it with this

HTML Code:

<link rel="stylesheet" type="text/css" href="/css/main.css" />

**djr33** · 12-11-2009, 12:47 AM

I wonder if this could be a problem related to the location of the image. I don't recall how relative paths work in CSS, but if the css is in a different directory than the html file, you may need to use a path relative to that for the image to be properly included. This may vary depending on how exactly everything is put together.

**jscheuer1** · 12-11-2009, 06:12 AM

When using a relative path in an external css file for background-image, it must be relative to the css file, not to the page that uses the css file. To avoid confusion (if any), the absolute path to the image may be used.

**Richiedude** · 12-11-2009, 01:33 PM

goddamn it f*ck me that was it path in css must be relative to css so in the css it should be:

Code:

background-image: url('../images/banner-back.gif');

**jscheuer1** · 12-11-2009, 03:05 PM

I'm not sure if that was a question or not. If so, the answer is yes. BTW, watch the language please.

Thread: css works inline but not in a css file

Thread Tools

Search Thread

css works inline but not in a css file

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions