11 replies [Last post]
dugal
dugal's picture
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

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?

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 24 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

There is - try looking here

There is - try looking here for more details.

http://thedesignspace.net/MT2archives/000103.html

dugal
dugal's picture
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

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

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?

dugal
dugal's picture
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

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

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 9 years 10 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

try <!--[if lte IE 7]>

try

mattrossidesigns.com

dugal
dugal's picture
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

gave it a whirl, no good

gave it a whirl, no good

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 9 years 10 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

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;
}

mattrossidesigns.com

dugal
dugal's picture
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

got that up, but

got that up, but nada

ifohdesigns, thanks for taking the time to work through this with me Smile

at the least, i think I have achieved graceful degradation!

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 11 years 38 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

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.

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 9 years 10 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

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.

mattrossidesigns.com

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

dugal
dugal's picture
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

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.