Css code to tweak a background image?

Hello was wondering if there is css code a person can write to re size or affect the transparency of a background image?

The transparency of a background image depends on the transparency of the element that it is a background of. Say you have a DIV with the following css rule:

div.myDiv {
background:url(myimage.jpg) transparent;

The DIV has an opacity of 0.5, and so will the background image.

background resizing can be done via the background-size property, but this is css3 so IE8 and lower versions will not recognize it.

Thanks Tommi will try it out.

Actually, there is a way to get the opacity recognised by Internet Explorer…

.opacity {
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

opacity:.50; = this is the CSS3 default, modern browsers should work with it.
-moz-opacity: 0.5; = this is for Netscape and old Mozilla browsers.
-khtml-opacity: 0.5; = this is for v1 of Safari and old Konquerer versions.
-ms-filter: “alpha(opacity=50)”; = this is for Internet Explorer v8.
filter: alpha(opacity=50); = this is for Internet Explorer v6 and v7.
filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; = this is for Internet Explorer v5.x and IEMac.

PS: Internet Explorer 9 supports Opacity as do modern versions of Firefox, Opera, Chrome and Safari… so you can make it work for everyone!

Your other part of the question about the size of a background image is also a css3 property:

Unsupported in IE and Firefox currently.

The background size is actually the css3 property I was referring to. As far as alpha filters are concerned, the css rules you are using won’t work in IE8.
In my experience IE8 uses -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0.5)”.
IE6/7 use filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0.5)” or filter: alpha(opacity=50);

With IE8, Microsoft IE team wanted to adhere to the vendor-extension setup… like -moz and -webkit. So they now use -ms.

Tommy, were you aiming that comment at me? If so, unfortunately you’re wrong. I’ve tested my opacity class and the specific implementation for IE8 and it works perfectly. As Stomme pointed out, in IE8 Microsoft threw out the vendor filter and went with the -ms extension to adhere to the prefix extension convention. While your implementation will work, it goes against Microsoft’s recommendations within IE8 (which my code addresses). :slight_smile:

Thank you all.
Funny when I posted this question I was assuming there would be really easy script.


Tommy listed the -ms version as being the one that works with IE8, and the non -ms version as working for IE6/7. That’s correct, yes?

Though I remember Paul O’B’s test where not only were the CSS commands different per IE version, but also ORDER mattered. And then when I tried something similar, his order didn’t work on MY IE’s (IE7 was blocked by IE8 I believe) so I rearranged a different order.

Bleh, IE.

Correct on all counts; you correctly understood what I meant and I have had the same experience as you. Weird…