User:Chris Chittleborough/CSS-notes

From Village pump (technical)
CSS setting "background:none"

It's sometimes useful to create tables which have the same background color as surrounding text, but Wikipedia's CSS gives all tables a different background color unless a style="..." attribute is used. The obvious CSS setting, "background-color:inherit" does not work with IE6 and earlier, but IE6 does understand "background: none". See here for an example. Both work in Firefox (of course!); I have not tried any other browsers. I am far from the first to "discover" this, which leads me to my point.

I strongly suggest that the m:Help:Table and/or m:Help:HTML_in_wikitext pages should say something about this. But first, we should check other browsers to see if this "trick" works in them.

Comments, questions and corrections welcome. Cheers, CWC (talk) 08:48, 29 April 2006 (UTC)


 * I tend to use  and it works fine in both IE7 and Firefox. —Locke Cole • t • c 09:13, 29 April 2006 (UTC)
 * It's also OK in IE6. CWC (talk) 11:04, 29 April 2006 (UTC)
 * If none and transparent are both valid and synonyms (I'm too lazy to check this) please tell us, none is shorter ;-) --&#160;Omniplex 17:17, 1 May 2006 (UTC)
 * I've done some reading. The latest CSS 2.1 spec says  means , whereas   means  . The spec says a valid declaration for   "first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration". The initial value for   is  , so   and   are equivalent in compliant browers, and even in IE6. Since style attributes override CSS rules,   seems to be what we want. Cheers, CWC (talk) 18:35, 1 May 2006 (UTC)
 * Great, thanks. So "background:transparent" could be used to remove an inherited background colour for a background image, without killing the image. And "none" simply removes both. Greets from the only User css-0 ;-) --&#160;Omniplex 19:32, 1 May 2006 (UTC)

Per CWC's request, I looked at List of indie game developers in Safari v2.0.3 (417.9.2) and saw no problems with the page render. Dread Lord C y b e r S k u l l ✎☠ 04:14, 5 May 2006 (UTC)
 * There also seems to be no problem with Safari v1.3.2 (v312.6). Dread Lord C y b e r S k u l l ✎☠ 22:24, 5 May 2006 (UTC)

It's also OK in Konqueror. I've proposed creating a new CSS class in MediaWiki:Common.css — see MediaWiki_talk:Common.css. Discussion can continue there. Cheers, CWC (talk) 07:16, 10 May 2006 (UTC)

Something I wrote in May 2007
Let me share with you some of my hard-won knowledge of background. (One of the MediaWiki developers has called background "sneaky", and he's right.)
 * It's a "shorthand" property: it sets a whole bunch of individual properties at once ( background-color, background-image , background-repeat , background-attachment , and background-position ).
 * Saying (for example) “ background: none ” sets the background-image property, since “ none ” cannot be used for any of the other background properties.
 * However, when you use a shorthand property, CSS sets all the individual properties to their initial values then sets the values you specify. So “ background: none ” is short for:
 * background-image: none; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%


 * The initial value of background-color, “ transparent ”, means “use the underlying background color”.
 * “ inherit ” is an exception: “ background: inherit ” is equivalent to
 * background-image: inherit; background-color: inherit; background-repeat: inherit; background-attachment: inherit; background-position:inherit


 * As if that's not complicated enough, not all browsers support CSS properly. In particular, version 6 of Internet Explorer does not support “ background-color: inherit ”. (I think current versions of IE do, but not everyone has upgraded.) So it's best to never use “ background: inherit ”.
 * So “ background: none ” gets you the underlying background, while “ background: white ” forces a white background.
 * At Wikipedia, you can use “ class: same-bg ” to get the underlying background. This CSS class is defined in MediaWiki:Common.css as “ { background: none; } ”. (See MediaWiki talk:Common.css/Archive 2 for discussion of this class.)