i've been struggling with this all afternoon, i'm making a site for my major project this year at uni and am under the clock so am running out of time to fix this problem. so far i have managed to get a placed image to become transparent with ie6, but for the life of me can not achieve a css defined background image to do the same, i have attempeted tackling bgsleight.js, but for reasons best known to it's self i can not get this to work. i have also searched this site and others attempting to fix my problem but can do no right it would seem, could some one please point me in the right direction? i'm going out of my mind
below is my code, so if it's in bad pratice i can only apologies :S
the site can be found @ http://www.routeb.com/morgan/scrapArt/
scrapArt// - Welcomes you to our homepage
Hi Sorry, I know nothing of
Sorry, I know nothing of transparencies. Frankly, who gives 2 hoots if IE can't do it? Does it look OK in FF and IE7, Opera 9 and Safari?
As long as IE6 isn't broken, I cannot see the whole thing about hacking around for a browser that we can all hope dies as quick and painful death as is possible.
However, your site fails validation because you have this in your style:
without closing it. I never use these daft things as they only satisfay a need to hide the style from ancient long dead browsers.
unfortunately it really does matter, for one, my univercity is still mainly running ie6 unitll the upgrade at the end of the student year, also my course is an interactive media course, and this is my final year and final project so it has to be spot on. and finally i'm making a big social site so i want as many people as possible to see it as i designed, however i would really like to give two fingers to the ie6 users and scream 'upgrade you freaks it's free for heavens sake', but that will neither help nor pass me my course
Hi Isn't this supposed to
Isn't this supposed to be an IE png fix:
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='myimage.png');
ok, i'm prepared to go with you on that, but where would i refernce it with in my code? the image is part of the css, so other codes wont work if placed with in the tags, - am i wrong/stupid?
Do you notice the
Do you notice the underscores in front of the tags?
Only IE6 sees these as if they didn't have the underscores. So, IE6 switches off the backgrond image and then does the filter. All other browsers see your real css, like this:
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/headerimage.png');
no no, attempted and failed :S in fact it ruined it in all other browsers to - aaaaaaarg!!!!!
BOOM - SHANKA!!!!!!!!!
IT WORKED!!!! PROPS TO YOU MY FRIEND!! PROPS!
Can you post the working
Can you post the working code so we can see, or did my code as it was, work?
i basicly used it as you gave it me, however it does not work with repeated images, it will stretch them, in my case it didnt matter as i have an image one pixel tale, to repeat, with it stretch, didnt make a differnece, but for others, i know there is a work around, but something to do with the: sizingMethod=scale, not sure what thought.
thanks so much, you cured my hate!
background-image: url(images/headerimage.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/headerimage.png');
font:Verdana, Arial, Helvetica, sans-serif;
font-family:Verdana, Arial, Helvetica, sans-serif;
and for my next irrating question....
is it the same basic princple for an image sourced into the site?
Yeh, never tried it with
Yeh, never tried it with repeated images, but I seen your code was no-repeat, so I assumed that was Ok.
This method cannot be used with patterend repeating images. But, if your image is one pixel tall, I assume it has width, otherwise it would be a single color. The width of the foregraound div must be the same as the image width, which I assume it is.
The sizingMethod cannot really do much other than leave the image as is (no-repeat equivalent), crop it or scale it.
Oh, and I think this method
Oh, and I think this method used on a link will switch the link off.
ah, yes but now i will use
ah, yes but now i will use php to change the image in css and have a png permanently in the div to effectively crop ever image loaded into it, so how do i make that png transparent? - make sense?
Not sure what you mean. If
Not sure what you mean.
If you are using php to change the image (maybe on a random basis, then that has to be done in style tags in the head like this (let's assume that the php variable is called $imagename):
Your Page Title Here
background-image: url(images/<? echo $imagename;?>);
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/<? echo $imagename;?>');
With all the other stuff still in the external css file.
If you are putting the image in <img /> tags, then you need to use the pngfix that everyone else uses.