Stylesheets - Multiple-image background?

Author

Multiple-image background?

FuzzyLogik

2006-11-19, 7:35 pm

I need the image to be in the CSS, because I plan to have multple
stylesheets.
The tricky part is I have 3 parts to the image, a top, the main bit,
and right,

Here is the image:
http://uplued.com/waffleimages/file...fd0cb65c0df.gif

Unless you can think of a way for me to have it all in one graphic and
have transparency? I'm not sure.

Anyone have ideas?

I want the XHTML to be as semantic as possible.

Thanks

Martin Eyles

2006-11-19, 7:36 pm

"FuzzyLogik" <tawxic@XXXXXXXXXX> wrote in message
news:1163259226.005095.152850@h54g2000cwb.googlegroups.com...
>I need the image to be in the CSS, because I plan to have multple
> stylesheets.
> The tricky part is I have 3 parts to the image, a top, the main bit,
> and right,
>
> Here is the image:
> http://uplued.com/waffleimages/file...fd0cb65c0df.gif
>

The image you provided is a page layout. I think you are refering to the
Main Header backgroud (ie. Phazam Web Services), so will assume that is what
you meant. In a table based layout you would split it into 3 images, but in
the css world there is no need to.

> Unless you can think of a way for me to have it all in one graphic and
> have transparency? I'm not sure.
> Anyone have ideas?

You can use transparency. For simple transparency you could use a .gif
image. This will only let you have on/off transparency though, so will give
you jagged edges.

For a better transparency capability, you can use .png images. This will
work in latest version of most browsers (even IE7). To get it to work in IE6
you will need to cheat.

A quick google search provides this link to help with that.

http://koivi.com/ie-png-transparency/

I would take the first bit of code suggested on the page, and put it either
in conditional comments or behind a star html hack. ie.

css

* html #logo {filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',
sizingMethod='scale');}

html

<img src="test.png" width="247" height="216" id="logo" alt="theCompanyLogo">

The other option is to use image replacement. Someone else on here is
probably better to talk about that - I've only done a little bit of it, and
can't remember it off hand.

>
> I want the XHTML to be as semantic as possible.
>
> Thanks
>

No Problem