Overriding a background image

[Stuart Hemming]

I have a stylesheet, called default.css, it includes the following:

BODY
{
MARGIN-TOP: 50px;
FONT-SIZE: 12pt;
FONT-FAMILY: Arial, 'Microsoft Sans Serif', Tahoma;
background-image: url('bg.jpg');
background-repeat: no-repeat;
}

I also have a stylesheet, called form.css, it includes:

BODY {
BACKGROUND-COLOR: buttonface;
}

My page includes both stylesheets, first default, then forms. My forms have
the background image rather than being plain grey. So I included
"background-image: url(none);" in forms.css but rather than now getting the
expected plain grey background, I get a white one. Testing (by including a
line to change the background colour in default.css) shows that the colour
is the background from default.css.

I know I could copy the relevant bits from default.css to forms.css and just
include the one stylesheet but that's kinda defeating the object. How do I
suppress the background image from one stylesheet in a subsequent one?

-------------------------------------------------------------------
These are *my* opinions. Please don't make the mistake of believing
anybody else is stupid enough to think like this!
-------------------------------------------------------------------
Stuart Hemming | shem...@cix.co.uk
PGP key: ldap://certserver.pgp.com |
-------------------------------------------------------------------

[viza]

Thus quoth Stuart Hemming:

> I have a stylesheet, called default.css, it includes the following:
> BODY {
> MARGIN-TOP: 50px;

I suggest you use lower case, although both proabably work.

> FONT-SIZE: 12pt;

You should not use absolute font sizes. What if I wanted to display this
page on a projector, the entire display would be 2m across, but the text
would be fixed at 12pt. Use something like font-size:medium;

> FONT-FAMILY: Arial, 'Microsoft Sans Serif', Tahoma;

You should always specify a generic family (serif or sans-serif etc.) as
the last option in case the user doesn't have these paticular typefaces.

> background-image: url('bg.jpg');
> background-repeat: no-repeat;
> }
>
> I also have a stylesheet, called form.css, it includes:
>
> BODY {
> BACKGROUND-COLOR: buttonface;
> }

buttonface is not a valid colour name. Specify a colour.

> My page includes both stylesheets, first default, then forms. My forms
> have the background image rather than being plain grey. So I included
> "background-image: url(none);"

'none' is not a valid url, you cannot enclose it in url(). Simply specify
background-image:none.

> in forms.css but rather than now getting the expected plain grey
> background, I get a white one. Testing (by including a line to change the
> background colour in default.css) shows that the colour is the background
> from default.css.
>
> I know I could copy the relevant bits from default.css to forms.css and
> just include the one stylesheet but that's kinda defeating the object. How
> do I suppress the background image from one stylesheet in a subsequent
> one?

You should only define the background for body once.

If you are going to respecify it, use a valid colour or url - otherwise it
will be ignored and the previous will be used.