Influence of transparent at the top of CSS

[toplisek]

I have set HTML at the top like:
[PHP]

html, body, div {
background: none repeat scroll 0 0 transparent;
}
html, body {
background: #FCCCDD url(../images/background1.jpg) no-repeat center 250px transparent;
}

[/PHP]

What are influences of transparent as it seems that transparent inside html, body will demand setting transparent to see #FCCCDD even there is demanded background: none repeat scroll 0 0 transparent;

What is priority for this settings?
Example:
1. removing transparent inside html, body {
will create not transparent setting and seen #FCCCDD
2. keeping transparent setting will act as transparent and remove #FCCCDD

Need help.

[lucy24]

Let's take it from the other end. What effect do you want to see? The keyword "transparent" is ordinarily a color name (background only in css<=2, everywhere in css >=3).

[toplisek]

I like to have transparent as default but sometimes my images as transparent or just defined Hex color.

So, keeping:
html, body, div {
background: none repeat scroll 0 0 transparent;
}

but main issue is
html, body {
background: #FCCCDD url(../images/background1.jpg) no-repeat center 250px transparent;
}

JPG needs transparent setting as this is not PNG. Sometimes I need #FCCCDD but JPG is not needed. I'm using 6 variables in the background shorthand where it only allows for 5. Is this true?

[lucy24]

The part I'm not getting is why you need to say anything at all, since transparent is the default for all backgrounds anyway. I don't think that saying "transparent" will make the white parts of a jpg transparent, if that's what you had in mind; for that you need to set an opacity value. And then you get into MSIE support.*

FCCCDD, hm, kinda pale cream?

:: detour to graphics program ::

Oops, no, read the numbers backward. Pink? Really? Makes me think of one e-book where I wanted to use a similar background color-- it was a cookbook about desserts and sweets-- but everyone who looked at it was reminded forcibly of Pepto-Bismol. What's the theme of the site?


* I was going to say "browser support" but looked it up and it seems as if everyone else has supported opacity since the dawn of time; only MSIE <= 9 is iffy. They definitely don't like alpha channels. But that's OK, because pngs > 8bit tend to be horribly oversized and not something you'd normally want to use.

[toplisek]

We are talking about HTML5 and CSS3...CSS2 was different.

Color does not matter...

[swa66]

You're only allowed ONE background color in a background statement in CSS3:
http://www.w3.org/TR/css3-background/#the-background

CSS3 defines "transparent" as rgba(0,0,0,0) - a COLOR.
http://www.w3.org/TR/css3-color/#transparent

So, any background statement that has both transparent and a color is invalid and most probably should be ignored by browsers (that last is an IMHO - not based on parts of a standard I looked up recently).

Anyway real world experience seems that browsers do not act like you think they should act when presented with what is invalid code: that's to be expected ...

[lucy24]

One thing I found while looking it up yesterday is that if a browser can't do alpha channels it is supposed to

:: shuffling papers ::

If RGBA values are not supported by a user agent, they should be treated like unrecognized values per the CSS forward compatibility parsing rules ([CSS21], Chapter 4). RGBA values must not be treated as simply an RGB value with the opacity ignored.

Their italics. That's tucked away in the color module [w3.org], not in Backgrounds and Borders.

Unlike most rules about Conforming User Agents, I suspect this one really will work. A browser that doesn't do alpha channels probably won't even recognize the "rgba" formulation, so then it defaults to the "if you don't understand it, ignore it" CSS rule.

The part I can't figure out is whether you can make a "first choice, second choice" formulation, in the same way that you can offer a comma-delimited list of fonts.

[swa66]

The part I can't figure out is whether you can make a "first choice, second choice" formulation, in the same way that you can offer a comma-delimited list of fonts.

You mean something like:

#test {
 background-color: rgb(50,50,50);
 background-color: rgba(100,100,100,0.5);
}

That's why the ignore what you do not understand rule is there in CSS: to allow a trivial way to give an fallback: put it first and then overrule it.

The shorthand background notation is such is difficult to use in this respect as it resets ALL background properties, also those not specified.