14 replies [Last post]
mattmorgan
mattmorgan's picture
Offline
Regular
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-04-04
Posts: 18
Points: 0

hi,

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 Sad

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









Featured Art

[PHP-IMAGE]

Sample Text

- Sample Text - Sample Text - Sample Text - Sample Text - Sample Text - Sample Text -

[TAGS]...

[DATE]

a




a


a




ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Sorry, I know nothing of

Hi

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.

mattmorgan
mattmorgan's picture
Offline
Regular
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-04-04
Posts: 18
Points: 0

unfortunately...

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 Sad

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Isn't this supposed to

Hi

Isn't this supposed to be an IE png fix:

_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='myimage.png');

CT

mattmorgan
mattmorgan's picture
Offline
Regular
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-04-04
Posts: 18
Points: 0

ok...

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?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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:

#headerimage{ background-image: url(images/headerimage.png); _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/headerimage.png'); }

I think!

mattmorgan
mattmorgan's picture
Offline
Regular
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-04-04
Posts: 18
Points: 0

nope

no no, attempted and failed :S in fact it ruined it in all other browsers to - aaaaaaarg!!!!!

thanks though Smile

mattmorgan
mattmorgan's picture
Offline
Regular
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-04-04
Posts: 18
Points: 0

no wait!!!!!!!!!!!!!!!!!!!!!!!!!!!!

BOOM - SHANKA!!!!!!!!!

IT WORKED!!!! PROPS TO YOU MY FRIEND!! PROPS!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Can you post the working

Can you post the working code so we can see, or did my code as it was, work?

mattmorgan
mattmorgan's picture
Offline
Regular
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-04-04
Posts: 18
Points: 0

sure,

sure.

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! Smile

#headerimage{ background-image: url(images/headerimage.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/headerimage.png'); background-repeat:no-repeat; height:107px; width:125px; font:Verdana, Arial, Helvetica, sans-serif; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding-left:820px; padding-top:20px; }

mattmorgan
mattmorgan's picture
Offline
Regular
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-04-04
Posts: 18
Points: 0

and for my next irrating question....

is it the same basic princple for an image sourced into the site?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Oh, and I think this method

Oh, and I think this method used on a link will switch the link off.

mattmorgan
mattmorgan's picture
Offline
Regular
UK
Last seen: 13 years 27 weeks ago
UK
Joined: 2007-04-04
Posts: 18
Points: 0

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?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

#headerimage{
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.

CT