Can you use the alpha filter to make PNG's work as background images?
I can figure out how to do it with inline styles
but is there a way to do this in the style sheet with background images?
There is - try looking here
There is - try looking here for more details.
that looks very promising,
that looks very promising, but my background image is for a title, where the background image is behind the text on the left (a logo). so not sure how to assign the styles
here is the code
HTML
LinuxVermont.com
CSS
h1 {
color: #FFFFFF;
font: 2.8em Arial, Helvetica, sans-serif;
padding: 1em 0 1em 2em;
margin-left: 1em;
background: url(../images/shared/lvlogo.png) center left no-repeat;
}
so according to the above article, is it as simple as
h1
{
background-image: none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/shared/lvlogo.png,
sizingMethod='scale');
}
What about the center left no-repeat
part of the background style?
tried it with the
tried it with the conditional elements in the head and no luck, no picture in fact
here is the link
www.linuxvermont.com/index.php
I know the menu's are fubar in IE6 as well, but that's a different issue
try <!--[if lte IE 7]>
try
gave it a whirl, no good
gave it a whirl, no good
Ok, try this then:
Ok, try this then:
In your head...
Then in the css file...
/* IE7 does not support the star-html hack anymore, so this is ignored by IE7: */
* html h1 {
background: transparent none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your-img-src.png',sizingMethod='scale');
cursor: pointer;
}
got that up, but
got that up, but nada
ifohdesigns, thanks for taking the time to work through this with me
at the least, i think I have achieved graceful degradation!
1) filters do apply to
1) filters do apply to elements that have haslayout set to true only.
2) You don't want the penguin to be scaled.
You can make this work by
You can make this work by making the h1 have an anchor in it, and then apply the background to the anchor, text-indent, and you should be good to go.
What ichao means is you need
What ichao means is you need to trigger hasLayout for the filter to kick in. Its easy enough to do that without modifying your html. And you should use one of the other sizingMethods.
/* for IE6, 5.5 stylesheet
* syntax for filter property (http://msdn2.microsoft.com/en-us/library/ms532969.aspx)
* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='path/to/image.png');
*
* notes:
* element must have layout for a filter to be enabled
* sizingMethod values: crop, image or scale
*/
h1 {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your-img-src.png',sizingMethod='crop');
zoom: 1;
}
zoom will trigger hasLayout with no other side effects.
Bloody Hell! You are the
Bloody Hell! You are the man Chris!!!!
It works like a charm.
Thanks guys for all the help. I would have given up on this stuff a long time ago if it wasn't for this site.