"FuzzyLogik" <ta****@gmail.comwrote in message
news:11**********************@h54g2000cwb.googlegr oups.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/files...d0cb65c0df.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