homepage Welcome to WebmasterWorld Guest from 54.242.18.232
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Influence of transparent at the top of CSS
toplisek




msg:4624825
 3:53 pm on Nov 20, 2013 (gmt 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.

 

lucy24




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

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




msg:4624988
 8:57 am on Nov 21, 2013 (gmt 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?

lucy24




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

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




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

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

Color does not matter...

swa66




msg:4625229
 9:36 pm on Nov 21, 2013 (gmt 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 ...

lucy24




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

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




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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved