Welcome to WebmasterWorld Guest from 54.226.246.160

Forum Moderators: not2easy

Message Too Old, No Replies

Influence of transparent at the top of CSS

     

toplisek

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

WebmasterWorld Senior Member 5+ Year Member



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

10:23 pm on Nov 20, 2013 (gmt 0)

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



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

8:57 am on Nov 21, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

9:30 am on Nov 21, 2013 (gmt 0)

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



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

7:07 pm on Nov 21, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

Color does not matter...

swa66

9:36 pm on Nov 21, 2013 (gmt 0)

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



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

11:18 pm on Nov 21, 2013 (gmt 0)

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



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

8:54 pm on Nov 22, 2013 (gmt 0)

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



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month