Specify Image Source in External CSS file? 2

[markdmac]

Anybody know if it is possible to specify an image source in an external CSS?

I have a log on my site that is on every page. I'd like to not have to specify all of the parameters for it including the image name. Is this possible?

Here is what I have:

img#logo
{
width: 359px;
height: 192px; 
align: baseline;
src: "images/logo.gif";
border: 0
}

In my web page I reference the file like this:

<img id="logo">

This seems to work for everything except the src tag. Is there a way to do this so I don't have to specify the logo src on each page?

I hope you find this post helpful. Please let me know if it was.

Regards,

Mark

 

[ChrisHunt]

No, you have to specify a [tt]src[/tt] (and an [tt]alt[/tt]) in the HTML. It makes sense if you think about it - you're supposed to put the content in the HTML and define the presentation of it in CSS. The actual image file is content, so it belongs in the HTML.

Having said that, you could make the image the background of an empty div...

#logo
{
width: 359px;
height: 192px;
background: url("images/logo.gif");
border: 0
}

<div id="logo"></div>

However, this has some disadvantages:
[ul]
[li]If people print out your pages, they'll come out without the logo image if they have the "ignore background colours and images when printing" option switched on (many will).
[/li]
[li]You have nowhere to put an [tt]alt[/tt] attribute for the benefit of blind visitors, including your most important blind visitor - the Google search bot.
[/li]
[li]Background images load last, so if you have a lot of foreground content to load on a page, the logo won't appear till after it's all there (which may look bad on a dial-up)[/li]
[/ul]
Personally I'd just use an ordinary <img> tag, and use SSI to repeat it on each page.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[markdmac]

Many thanks Chris, an excellent explanation.

I hope you find this post helpful. Please let me know if it was.

Regards,

Mark

 

[CliveC]

A perfect situation for a simple frameset. Now you don't even have to reload the image and log in each page.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[leinad]

Clive's solution is a 20-second fix that some might opt to spend hours on. Even if you figure it out after a while, it is far better to use the tried and true old-school solution many times.

Give the man a star

~Daniel

He is no fool who gives that which he cannot keep to gain what he cannot lose.
- Jim Elliot

 

[Vragabond]

I disagree. To use frames simply for presentational purpose (which putting an image in a frame is) is just a misuse.

 

[CliveC]

A frame does not know it is a frame. In fact a frame is no different from any other page. As a developer the only question to ask is:

In this application, would it be useful to show one or more pages in the same browser window? The answer is yes or no.

It is interesting to note that in a two frame frameset (navigation and page) the application would still work, outside of a frameset, just by invoking the navigation page. That is why these type of framesets work well in handhelds.

No Fear!

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[CliveC]

In this particular case, it is pointless loading the same image over and over again with each new page. A framset would save the reload.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[ChrisHunt]

Though since the image would be cached on the client once the first page is viewed, the overhead in "loading the image over and over again" is minimal.

Accepting all the difficulties and disadvantages of frames just to get an image showing on each page probably isn't worth it - especially if you're able to use alternatives like SSI.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd