This has me stumped. I simply want to use rgba and a background image with fall back for IE8. Without having to say the image twice. Easy right.
With image twice it works everywhere #top b {
background:rgb(255, 255, 255) url(…/img/top.png) 11px 14px no-repeat;
background:rgba(255, 255, 255, .6) url(…/img/top.png) 11px 14px no-repeat;
}
With image once it works nowhere #top b {
background-color:rgb(255, 255, 255);
background-color:rgba(255, 255, 255, .6);
background-image:url(…/img/top.png) 11px 14px no-repeat;
}
When I say “works nowhere” I mean the background color shows but no image. “b” is AP’d with dimensions. What am I missing?
There is nothing on the web about this which leads me to believe its user error. I have actually never said both color and image. I just always short hand it. Maybe I don’t know how that works in combo. Or maybe it works dif with rgba. Or maybe I have something else getting in the way here. Just let me know where I went off the road?
PS webkit is dropping the ball when it comes to generated content. I thought they were the leading standard pushers? Again webkit kept me from using :before and :after because it doesn’t do transitions on :before and :after. That’s ridiculous especially since its been a documented bug now for 3 years. If you can’t fix something in 3 years time its time to hang it up.
Ahh it was user error as I thought then. So you can’t just say image. That’s was threw me off. Because when saying it short hand if you just say image with no position or repeat it still shows the image - correct position or not its still there.
No worries - I’ve done it enough time to catch it…
It’s different because the shorthand is background, not background-image. background-image is a subset of background. Kind of like border-left is a subset of border.
it strikes me that you could write the shorthand property and then the background color with rgba()… but I am curious how does this work as a fallback? wouldn’t the fallback image show up on all browsers even those who support rgba()?
BTW:
you can define opacity for IE this way:
//// for IE5-7
filter: alpha(opacity=50);
// for IE8
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
I just recently read (and forgot) that one of the browsers (either IE or the others) abort the rule once they hit something they don’t understand. I believe that was IE. So if true IE should not read the image as soon as it sees rgba.
Edit: ya I have written off IE6 and 7. Now IE8 looks like IE6 would in the past for me with this design. I have some fixing to do. And I don’t care to give IE8 pretty things. Just a blocky fully working site is all it gets.
That’s because you are only including the rest of the options in the version IE doesn’t understand. If you swap it around this way then the only part IE doesn’t understand is in a separate statement.
Yup, Stephen code is exactly what I was trying to say.
But my question was more about COMPLIANT browsers, shouldn’t: #top b {
background-color:rgb(255, 255, 255);
background-color:rgba(255, 255, 255, .6);
background-image:url(…/img/top.png);
background-position: 11px 14px;
background-repeat: no-repeat;
}
show BOTH the image and the semi-transparent color in browsers such as FF and Safari? I dont think that what you would want , but maybe am wrong.