Welcome to WebmasterWorld Guest from 54.211.62.139

Forum Moderators: not2easy

Message Too Old, No Replies

Influence of transparent at the top of CSS

     
3:53 pm on Nov 20, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2006
posts: 1023
votes: 0


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.
10:23 pm on Nov 20, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13266
votes: 363


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).
8:57 am on Nov 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2006
posts: 1023
votes: 0


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?
9:30 am on Nov 21, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13266
votes: 363


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.
7:07 pm on Nov 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2006
posts: 1023
votes: 0


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

Color does not matter...
9:36 pm on Nov 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


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 ...
11:18 pm on Nov 21, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13266
votes: 363


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.
8:54 pm on Nov 22, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


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.