User:Chris Chittleborough/CSS-notes

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 background: transparent; 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 ;-) -- Omniplex 17:17, 1 May 2006 (UTC)

I've done some reading. The latest CSS 2.1 spec says background: none means background-image: none, whereas background: transparent means background-color: transparent. The spec says a valid declaration for background "first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration". The initial value for background-color is transparent, so none and transparent are equivalent in compliant browers, and even in IE6. Since style attributes override CSS rules, background: none 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 ;-) -- 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 CyberSkull ✎☠ 04:14, 5 May 2006 (UTC)

There also seems to be no problem with Safari v1.3.2 (v312.6). Dread Lord CyberSkull ✎☠ 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#Proposal:_class_same-bg. Discussion can continue there. Cheers, CWC(talk) 07:16, 10 May 2006 (UTC)

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#Proposal: class same-bg for discussion of this class.)