background image

[Erik Schulp]

Hi all,

I am using a background image via a stylsheet.

I've used this code: background-image:url("/images/tile.gif"); (which
I think is correct)

The image doesn't show up however, the path, the filename etc etc,
everything checks out ok.

Anybody an idea what might cause this ?
Erik Schulp

https://www.sgtclog.nl

eschulp@-houjerotzooimaa r-home.nl

-Let's all hope there is intelligent life on other planets,
cuz' here on earth, there is bugger all!- *Monty Python*

[Analysis&Solutions]

Re: background image

In <34cjmv4ir534mi ee7tph71d5r21gj bk04f@4ax.com> Erik Schulp <eschulp@NOSP AM-home.nl> writes:
[color=blue]
>I've used this code: background-image:url("/images/tile.gif");[/color]

Ditch the quotes. Maybe add a space between "image:" and "url." The
following works for me:

background-image: url(http://localhost/rickshaw/graphics/logoback.gif);

--Dan

--
FREE scripts that make web and database programming easier

http://www.analysisandsolutions.com/software/

T H E A N A L Y S I S A N D S O L U T I O N S C O M P A N Y
4015 7th Ave #4AJ, Brooklyn NY v: 718-854-0335 f: 718-854-0409

[Christoph Paeper]

Re: background image

*Erik Schulp* <eschulp@NOSP AM-home.nl>:[color=blue]
>
> background-image:url("/images/tile.gif");[/color]

That's correct syntax. To tell you more than that one needs to see more of
the code (CSS and probably HTML also), better yet give the URL and in which
browser[s] the image doesn't show up.

--
The Hitchhiker's Guide to the Galaxy: "To summarize: It is a well-known fact
that those people who must want to rule people are, ipso facto, those least
suited to do it. To summarize the summary: Anyone capable of getting themselves
made President should by no means be allowed to do the job. To summarize the
summary of the summary: People are a problem."

[Philipp Lenssen]

Re: background image

Christoph Paeper wrote:
[color=blue]
> *Erik Schulp* <eschulp@NOSP AM-home.nl>:[color=green]
> >
> > background-image:url("/images/tile.gif");[/color]
>
> That's correct syntax. To tell you more than that one needs to see
> more of the code (CSS and probably HTML also), better yet give the
> URL and in which browser[s] the image doesn't show up.[/color]

Without any other context than above; quotations around URLs in CSS,
though correct, can confuse some browsers.

--
Google Blogoscoped

http://blog.outer-court.com

[Tim]

Re: background image

On Thu, 18 Sep 2003 15:19:25 +0200,
Erik Schulp <eschulp@NOSP AM-home.nl> wrote:
[color=blue]
> I've used this code: background-image:url("/images/tile.gif"); (which
> I think is correct)[/color]

Do you mean something like:

body
{
background-image: url("/example.gif");
}

We don't know if you're trying it somewhere fancy that doesn't work, or
in the wrong way, or with a browser that doesn't support it.
[color=blue]
> The image doesn't show up however, the path, the filename etc etc,
> everything checks out ok.
>
> Anybody an idea what might cause this ?[/color]

Only with an example. There's too many variables in the equation.

--
My "from" address is totally fake. The reply-to address is real, but
may be only temporary. Reply to usenet postings in the same place as
you read the message you're replying to.

[Grayle]

Re: background image

In article <34cjmv4ir534mi ee7tph71d5r21gj bk04f@4ax.com>, eschulp@NOSPAM-
home.nl says...[color=blue]
> Hi all,
>
> I am using a background image via a stylsheet.
>
> I've used this code: background-image:url("/images/tile.gif"); (which
> I think is correct)
>
> The image doesn't show up however, the path, the filename etc etc,
> everything checks out ok.
>
> Anybody an idea what might cause this ?
> Erik Schulp
> www.sgtclog.nl
> eschulp@-houjerotzooimaa r-home.nl[/color]
[color=blue]
>[/color]
body {background: #dadada url("./images/tile.gif") }

Note the . before the / No doubt someone will will say that it is not
necessary, but try it. It's how I always do it, and it works here. I've
heard the quotes are optional.
Don't forget that path/filename is case sensitive if your site is on a
*nix server.

--
Win98se, P200 MMX, 64MB RAM Opera7.20b11

[Tina Holmboe]

Re: background image

Grayle <ttoblyr@ubgxrl .arg.nh> exclaimed in <MPG.19d539b1f8 b1c9c8989758@ne ws.hotkey.net.a u>:

[quoting Eric Schulp]
[color=blue][color=green]
>> I've used this code: background-image:url("/images/tile.gif"); (which
>> I think is correct)
>>
>>[/color]
> body {background: #dadada url("./images/tile.gif") }[/color]

[color=blue]
> Don't forget that path/filename is case sensitive if your site is on a
> *nix server.[/color]

Oh, yes, filenames and paths are indeed case insensitive on Unix-family
computers, but the above is not a path - it's an URI. To boot, his URI

/images/tile.gif

points to a difference resource than your URI

./images/tile.gif

The syntax quoted:

background-image:url("/images/tile.gif");

is correct, if slightly compact and IMHO bad style. However, without
more information the only thing I can suggest is to remember that for
CSS stylesheets the base URI is that of the stylesheet, not that of
the document.

I doubt that matters here. We need more information.

--
- Tina Holmboe Greytower Technologies
tina@greytower. net http://www.greytower.net/
[+46] 0708 557 905

[Chris Morris]

Re: background image

tina@greytower. net (Tina Holmboe) writes:[color=blue]
> background-image:url("/images/tile.gif");
>
> is correct, if slightly compact and IMHO bad style. However, without
> more information the only thing I can suggest is to remember that for
> CSS stylesheets the base URI is that of the stylesheet, not that of
> the document.[/color]

Except in Netscape 4, of course - yet another bug.
[color=blue]
> I doubt that matters here.[/color]

Given the leading /, only if the CSS file is on a different host:port
combination to the page.
with mixed http and https pages.

--
Chris

[Grayle]

Re: background image

In article <34cjmv4ir534mi ee7tph71d5r21gj bk04f@4ax.com>, eschulp@NOSPAM-
home.nl says...[color=blue]
> Hi all,
>
> I am using a background image via a stylsheet.
>
> I've used this code: background-image:url("/images/tile.gif"); (which
> I think is correct)
>[/color]
Mikko's excellent post led me to actually have another look at this.

For good measure, we'll add three more cases, where the images are in
the root directory along with the HTML and the CSS.
One: url(tile.gif)
two: url(/tile.gif)
three: url(./tile.gif)
In an OFF-LINE environment ...
Opera7.2b11 and NN4.08 treat all six cases (ie; the first three plus
(images/tile.gif), (/images/tile.gif) and (./images/tile.gif)
identically and always displays the image called "tile.gif" in the sub-
directory called "images"
NONE of IE5.0, Mozilla/Firebird, Opera6.05, Opera7.02 and KMeleon0.7
display the image for case two/five, but they treat cases one/four and
three/six as identical and display the image correctly.

So - Nikolaos was mostly wrong when he suggested[color=blue][color=green]
>>background-image: url(/images/tile.gif)
>>NOTE: The lack of double quotes[/color][/color]

because it only works in NN4 and a (possibly broken) beta of Opera, and
I was half-wrong when I suggested

(./images/tile.gif)

because although it works, it's unnecessary. (so Nikolaos was right
about that)

Mikko was correct when he said that (images ...) and (./images ...) were
functionally equal. Thanks Mikko - I can save two bytes every time I
point to something! I LIKE that.

Scores to date: Mikko 10 Grayle 5 Nikolaos 5


Now let us shift the CSS file into a subdirectory (say, /css), leaving
the HTML in
root and the images in /images.
For good measure, we'll add as case seven, (../images/tile.gif), which
is the only one that ought to work.

IE5, Moz/Firebird, Kmeleon, Opera6.05, Opera 7.02 and Opera7.2b11 find
the image if it
is addressed (../images/tile.gif) but not, as expected, in any other
case.
NN4.08 finds the image in cases one, three, four and six (NOT when
correctly addressed as above)
Remember all of the above are OFFLINE findings on MY machine.

Aaah buggerit. Go here -

http://www.hotkey.net.au/~ggboyle/wip/dottest.htm

and

http://www.hotkey.net.au/~ggboyle/wip/dottestdir.htm

--
Win98se, P200 MMX, 64MB RAM Opera7.20b11

[Nikolaos Giannopoulos]

Re: background image

Grayle wrote:[color=blue]
> In article <34cjmv4ir534mi ee7tph71d5r21gj bk04f@4ax.com>, eschulp@NOSPAM-
> home.nl says...
>[color=green]
>>Hi all,
>>
>>I am using a background image via a stylsheet.
>>
>>I've used this code: background-image:url("/images/tile.gif"); (which
>>I think is correct)
>>[/color]
>
> Mikko's excellent post led me to actually have another look at this.
>
> For good measure, we'll add three more cases, where the images are in
> the root directory along with the HTML and the CSS.
> One: url(tile.gif)
> two: url(/tile.gif)
> three: url(./tile.gif)[/color]

If you want to talk cases then post URLs for each of your cases
otherwise as I said before please don't make mis-leading suggestions
unless you can back them up.

Post URLs and then we can all look at what you are talking about.

[color=blue]
> In an OFF-LINE environment ...[/color]

Right. And the reason for this is so that *nobody* can verify your
claims - In an offline environment anyone can claim anything.

This is already looking like its going to be a great rebuttle.

[color=blue]
> Opera7.2b11 and NN4.08 treat all six cases (ie; the first three plus
> (images/tile.gif), (/images/tile.gif) and (./images/tile.gif)
> identically and always displays the image called "tile.gif" in the sub-
> directory called "images"[/color]

I think you are really missing the point here - the OP has *never* given
enough information to correctly determine what his problem is. He only
gave reference to a CSS rule with an absolute URL.

Where his CSS rule lies - within the html document or in an external
stylesheet in some folder is all speculation.

Since he does not give this information then we can't help him further
other than to suggest possible issues NOT related to location.

Christoph Paeper wrote:[color=blue]
> That's correct syntax. To tell you more than that one needs
> to see more of the code (CSS and probably HTML also), better
> yet give the URL and in which browser[s] the image doesn't show up.[/color]

As Tim wrote:[color=blue]
> We don't know if you're trying it somewhere fancy that doesn't work,
> or in the wrong way, or with a browser that doesn't support it.[/color]

As Tina wrote:[color=blue]
> However, without more information the only thing I can suggest is
> to remember that for CSS stylesheets the base URI is that of the
> stylesheet, not that of the document.
>
> I doubt that matters here. We need more information.[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^
Are you getting the picture here....

Thus there are no cases at least none that the OP has provided and
really not much to talk about unless the OP wants to give further info.

If you want to start a new thread on what "your" cases then go ahead but
don't expect many replies unless you provide *online* URLs.

[color=blue]
> NONE of IE5.0, Mozilla/Firebird, Opera6.05, Opera7.02 and KMeleon0.7
> display the image for case two/five, but they treat cases one/four and
> three/six as identical and display the image correctly.
>
> So - Nikolaos was mostly wrong when he suggested[/color]

Mostly wrong???? How do you determine that AND moreover about what.
Take a look at this URL:

http://www.solmar.ca/temp6/index.html

whose CSS is here:

http://www.solmar.ca/temp6/css/base.css

Do you see the lack of double quotes - Do you see the images.

Yes this works in IE 5 and IE 6 win, Opera 6.05 and Moz 1.3. Therefore
I have no idea what you are talking about. If the quotes are required I
would be happy to include them if someone can tell me what browsers it
does not work in - and yes I would like to see it for myself in an
ONLINE environment.

If you need to (a) put "./" in front of URLs to make things work for you
and you can (b) only provide test cases in an offline environment then I
think there may be something wrong with your system configuration.

[color=blue][color=green][color=darkred]
>>>background-image: url(/images/tile.gif)
>>>NOTE: The lack of double quotes[/color][/color][/color]
[color=blue]
> because it only works in NN4 and a (possibly broken) beta of Opera, and
> I was half-wrong when I suggested
>
> (./images/tile.gif)[/color]

Half wrong. Most people with any real world CSS *hide* their CSS from
NN4 and really who cares if it works for a beta version of Opera (of
which you fail to mention a version for to boot).

How about totally wrong - and totally useless.

[color=blue]
> because although it works, it's unnecessary. (so Nikolaos was right
> about that)
>
> Mikko was correct when he said that (images ...) and (./images ...) were
> functionally equal. Thanks Mikko - I can save two bytes every time I
> point to something! I LIKE that.
>
> Scores to date: Mikko 10 Grayle 5 Nikolaos 5[/color]

Scores??? For what - Hey Mikko your beating us ;-) At least I'm tied
with Grayle.... Wow. Where is the competition???? What's the prize????

Honestly, I asked you to provide online test cases and the only thing
you could do was reply to the OP with *non-tangible* test cases -

You may be right that things don't work without double quotes in an
offline environment but I honestly don't care to even try if you won't.

[color=blue]
> Now let us shift the CSS file into a subdirectory (say, /css), leaving
> the HTML in root and the images in /images.
>
> [snip][/color]

Got tired of reading your cases that you don't have the courtesy to
provide a URL for....

Scores to date:

Mikko Doesn't matter Grayle *unknown* Nikolaos Doesn't matter

If you want to broaden your understanding then go ahead - if you want to
turn posts into a competition then please grow up.

--Nikolaos

[Brian]

Re: background image

Nikolaos Giannopoulos wrote:[color=blue]
>
> http://www.solmar.ca/temp6/index.html
>
> http://www.solmar.ca/temp6/css/base.css
>
> Do you see the lack of double quotes - Do you see the images.
>
> Yes this works in IE 5 and IE 6 win, Opera 6.05 and Moz 1.3.[/color]
[snip][color=blue]
> If the quotes are required I would be happy to include them if
> someone can tell me what browsers it does not work in[/color]

On the contrary! While quotes are allowed by the spec, MSIE/Mac 5.1
(IIRC) chokes on them. 5.0 can handle them. Strange, that. In
response to a request for testing help, I tried different things out
while housesitting for a prof who had a Mac, and posted my findings here.

http://groups.google.com/groups?&threadm=b5cev9%24271gta%241%40ID-61067.news.dfncis.de

(url may wrap in your newsreader)

The results are now available on the web:

http://w3development.de/css/assigning_external_css/

--
Brian
follow the directions in my address to email me

[Nikolaos Giannopoulos]

Re: background image

Brian wrote:[color=blue]
> Nikolaos Giannopoulos wrote:
>[color=green]
>> http://www.solmar.ca/temp6/index.html
>> http://www.solmar.ca/temp6/css/base.css[/color]
>[color=green]
>> If the quotes are required I would be happy to include them if
>> someone can tell me what browsers it does not work in[/color]
>
> On the contrary! While quotes are allowed by the spec, MSIE/Mac 5.1
> (IIRC) chokes on them.[/color]

Right.

I don't use quotes to wrap URL's in CSS - as can be seen on the site
which I deliberately referenced. I had heard that some browsers had
problems when quotes were present but did not know of the specific
browsers (thanks for the info on IE 5 Mac).

My original suggestion was the following to which Grayle replied:

Grayle wrote:[color=blue]
> So - Nikolaos was mostly wrong when he suggested
>[color=green][color=darkred]
>>>background-image: url(/images/tile.gif)
>>>NOTE: The lack of double quotes[/color][/color][/color]

I simply gave him an *online* example where no quotes are utilized and
the background image works on *at least* IE 5 and 6 on win, Mozilla 1.3
and Opera 6.05.

In my response to Grayle (top), I left open the fact that if there is a
browser that has a problem with the *lack of* (not presence of) quotes
then I would love to hear about it otherwise I don't think quotes should
be used.

--Nikolaos

[Grayle]

Re: background image

In article <XR6dnR1FK9Qj3v KiXTWJkw@magma. ca>, nikolaos@solmar .ca says...
[color=blue]
>
> If you want to talk cases then post URLs for each of your cases
> otherwise as I said before please don't make mis-leading suggestions
> unless you can back them up.
>
> Post URLs and then we can all look at what you are talking about.
>[/color]
What part of

Aaah buggerit. Go here -

http://www.hotkey.net.au/~ggboyle/wip/dottest.htm

and

http://www.hotkey.net.au/~ggboyle/wip/dottestdir.htm

do you not understand?[color=blue]
>[/color]
<snip>[color=blue]
>
> I think you are really missing the point here - the OP has *never* given
> enough information to correctly determine what his problem is. He only
> gave reference to a CSS rule with an absolute URL.
>[/color]
not missing anything. I made the same assumption in my original post as
it appears you did in yours.
[color=blue]
> Where his CSS rule lies - within the html document or in an external
> stylesheet in some folder is all speculation.
>
> Since he does not give this information then we can't help him further
> other than to suggest possible issues NOT related to location.
>[/color]
correct.

--
Win98se, P200 MMX, 64MB RAM Opera7.20b13

[Nikolaos Giannopoulos]

Re: background image (long)

Grayle wrote:[color=blue]
> In article <XR6dnR1FK9Qj3v KiXTWJkw@magma. ca>, nikolaos@solmar .ca says...
>
> http://www.hotkey.net.au/~ggboyle/wip/dottest.htm[/color]

You make the following statement on your test page:

"HTML and CSS are in root,..."

Herein I believe lies your mis-understanding - the root of your web
server is not the directory that this html page is found in (which
specifically is):

http://www.hotkey.net.au/~ggboyle/wip/dottest.htm

*BUT* instead the root of your web server (account) is:

http://www.hotkey.net.au/~ggboyle

A "/" at the start of a URL makes the URL absolute i.e. relative to the
root directory of your web server i.e. in your case relative to:

http://www.hotkey.net.au/~ggboyle

IMPORTANT: Absolute URLs don't make sense in an offline environment as
there is no root web server directory on your offline file system i.e.
you can only test absolute URLs when your pages are running inside a web
server. Some people specifically install web servers on their local
machines just for this reason.

Moreover a "./" at the start of a URL makes the URL relative which is
EXACTLY the same as if it where not present.


To be clear:

..conone and .conthree use relative URLs to locate the resource:

http://www.hotkey.net.au/~ggboyle/wip/goat.gif

..contwo uses an ABSOLUTE URL to locate the resource:

http://www.hotkey.net.au/~ggboyle/goat.gif

*BUT* goat.gif does not exist in the directory
http://www.hotkey.net.au/~ggboyle so this case won't work. Put goat.gif
in there and this will work.

..confour and .consix are similar to .conone and .conthree (except for
the added subdir) and work as they locate the resource:

http://www.hotkey.net.au/~ggboyle/wip/dot2/grakat.gif

..confive is similar to .contwo and does not work since it once again
tries to locate a resource (using an absolute URL) that does not exist:

http://www.hotkey.net.au/~ggboyle/dot2/grakat.gif

[color=blue]
> http://www.hotkey.net.au/~ggboyle/wip/dottestdir.htm[/color]

Once again you make the following mis-statement:

"HTML file is in root. CSS is in /css2..."

Html and CSS respectively are in:

http://www.hotkey.net.au/~ggboyle/wip/dottestdir.htm

http://www.hotkey.net.au/~ggboyle/wip/css2/testdotdir.css

NOT in the following root dirs that you are suggesting:

http://www.hotkey.net.au/~ggboyle/dottestdir.htm

http://www.hotkey.net.au/~ggboyle/css2/testdotdir.css

More cases to go through...

IMPORTANT: The main thing to remember with external style sheets is that
relative URLs are determined FROM the external stylesheet NOT the HTML file

..conone and .conthree use relative URLs to obtain resource at:

http://www.hotkey.net.au/~ggboyle/wip/css/goat.gif

*BUT* goat.gif does not exist in the css dir

..contwo uses a absolute URL to access the same resource as .contwo in
your *first* test page i.e. the resource at:

http://www.hotkey.net.au/~ggboyle/goat.gif

*BUT* we already know that doesn't exist from the first test page

..confour and .consix are similar to .conone and .conthree (except for
the added dot2 subdir) and try to locate:

http://www.hotkey.net.au/~ggboyle/wip/css/dot2/grakat.gif

*BUT* once again goat.gif does not exist in the css/dot2 subdir

..confive uses an absolute URL to access the same resource as .confive in
your *first* test page i.e. the resource at:

http://www.hotkey.net.au/~ggboyle/dot2/grakat.gif

*BUT* we already know that doesn't exist from the first test page

..conseven unsurprisingly works as it tries to access a relative URL
(starting from the CSS dir) located at:

http://www.hotkey.net.au/~ggboyle/wip/css/../dot2/grakat.gif

which is the same as:

http://www.hotkey.net.au/~ggboyle/wip/dot2/grakat.gif

and thus makes the NET effect of case .conseven equivalent to the result
found in .confour and .consix on your first test page.

[color=blue][color=green]
>>I think you are really missing the point here - the OP has *never* given
>>enough information to correctly determine what his problem is. He only
>>gave reference to a CSS rule with an absolute URL.[/color]
>
> not missing anything. I made the same assumption in my original post as
> it appears you did in yours.[/color]

Yes - we both made an assumption but we both made very different
assumptions.

You made the assumption that absolute URLs don't work - no doubt I can
see now why since they would not work in an offline environment without
a web server and you probably didn't realize this - until hopefully now.

The URL the OP presented was absolute:

/images/tile.gif

and you suggested that he try:

../images/tile.gif

which is a relative URL.

If his CSS rule was in a file (HTML or external style sheet) in the root
directory of his web server then your suggestion at best would have made
no difference - at worst your suggestion causes additional confusion
especially when coupled with a comment such as:

"No doubt someone will will say that it is not necessary, but try it."

My assumption was that the user knows something about URLs - in fact you
kind of need to know, not just for CSS but for HTML as well - being a
CSS forum my suggestion was to remove the double quotes as others have
pointed out that that causes problems in IE 5 mac.


[color=blue][color=green]
>>Where his CSS rule lies - within the html document or in an external
>>stylesheet in some folder is all speculation.
>>
>>Since he does not give this information then we can't help him further
>>other than to suggest possible issues NOT related to location.[/color]
>
> correct.[/color]

Hopefully you'll now understand a little more about why people don't
recommend the "./" prefix to URLs and moreover the difference of
absolute vs. relative URLs coupled with why absolute URLs don't work in
an offline environment.

Finally, in order for all your test cases to work these are the
addtional files that you need to have - I'll specify them as absolute
resource URLs:

/goat.gif
/dot2/grakat.gif
/wip/css/goat.gif
/wip/css/dot2/grakat.gif

Put goat.gif and grakat.gif in these locations and things will work
(online of course).

If you don't believe what I am saying then take a look at your test
pages (which are unaltered) at:

http://www.solmar.ca/ggboyle/wip/dottest.htm

http://www.solmar.ca/ggboyle/wip/dottestdir.htm

My apologies for the length of the reply but I honestly hope this clears
things up for you.

Still think I was "mostly wrong"? ;-)

I spent significant time putting this together for you - hopefully you
will take something away from this discussion that will help you down
the road.

--Nikolaos

[kchayka]

Re: background image (long)

Nikolaos Giannopoulos wrote:[color=blue]
> Grayle wrote:[color=green]
>> In article <XR6dnR1FK9Qj3v KiXTWJkw@magma. ca>, nikolaos@solmar .ca says...
>>
>> http://www.hotkey.net.au/~ggboyle/wip/dottest.htm[/color]
>
> You make the following statement on your test page:
>
> "HTML and CSS are in root,..."
>
> Herein I believe lies your mis-understanding - the root of your web
> server is not the directory that this html page is found in (which
> specifically is):
>
> http://www.hotkey.net.au/~ggboyle/wip/dottest.htm
>
> *BUT* instead the root of your web server (account) is:
>
> http://www.hotkey.net.au/~ggboyle[/color]

For non-virtual domains like this, unless there's some redirection going
on root is at the domain level, not the account level. So an absolute
URL of "/path/file.ext" is looking for
"http://www.hotkey.net. au/path/file.ext".

If you're going to use absolute URLs in cases like this, refer to root
as "/~ggboyle/".

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.