By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,512 Members | 3,689 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,512 IT Pros & Developers. It's quick & easy.

background: vs background-color:

P: n/a
According to the CSS lint at http://htmlhelp.org/tools/csscheck/, "The
shorthand background property is more widely supported than
background-color." Can anyone point me to, or provide, information on what
browsers have difficulty with the non-shortcut methods of setting
background properties?
Jul 20 '05 #1
Share this Question
Share on Google+
25 Replies


P: n/a
Neal wrote:
shorthand background property is more widely supported than
background-color." what browsers have difficulty with the non-shortcut methods of setting
background properties?


NN4 I think, and maybe IE3. But more important point is that use of
background shorthand for color also sets background-image to none, which
is good thing, as you don't want users orange background image on your
cool ice blue site. Ther is hardly ever case where it would make sence
not to use shorthand.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #2

P: n/a
On Tue, 11 May 2004 06:52:12 +0300, Lauri Raittila
<la***@raittila.cjb.net> wrote:
Neal wrote:
shorthand background property is more widely supported than
background-color."

what browsers have difficulty with the non-shortcut methods of setting
background properties?


NN4 I think, and maybe IE3. But more important point is that use of
background shorthand for color also sets background-image to none, which
is good thing, as you don't want users orange background image on your
cool ice blue site. Ther is hardly ever case where it would make sence
not to use shorthand.


So, as I suspected, the linter is over-cautious. Beautiful.

Thanks.
Jul 20 '05 #3

P: n/a
Neal wrote:
On Tue, 11 May 2004 06:52:12 +0300, Lauri Raittila
<la***@raittila.cjb.net> wrote:
Neal wrote:
shorthand background property is more widely supported than
background-color."
So, as I suspected, the linter is over-cautious. Beautiful.


http://htmlhelp.org/tools/csscheck/

Well, it doesn't seem to be updated since 2001, and IIANM, not really
worked on since 1999...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #4

P: n/a
Lauri Raittila wrote:
more important point is that use of background shorthand for color
also sets background-image to none, which is good thing, as you don't
want users orange background image on your cool ice blue site.


If authors set color and background-color for each level of specificity,
or set neither, then who are they to tell a user not to add a background
image?

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #5

P: n/a
Brian wrote:
Lauri Raittila wrote:
more important point is that use of background shorthand for color
also sets background-image to none, which is good thing, as you don't
want users orange background image on your cool ice blue site.


If authors set color and background-color for each level of specificity,
or set neither, then who are they to tell a user not to add a background
image?


Because yellow text is hard to read on orange background image, just as
it is hard to read uellow on orange background color, exept maybe even
harder. It does not help much if author has set background-color was
blue, if user has yellowish background image. Notice that

user may have set:
* {background:url(orange.jpg)}
and author:
h1 {background-color:blue;color:yellow;}

It will result yellow on orange.jpg

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #6

P: n/a

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:10************@corp.supernews.com...
Lauri Raittila wrote:
more important point is that use of background shorthand for color
also sets background-image to none, which is good thing, as you don't
want users orange background image on your cool ice blue site.


If authors set color and background-color for each level of specificity,
or set neither, then who are they to tell a user not to add a background
image?


Think about the recommendation that whenever you provide a foreground color,
you should provide a background color. Who am I to tell the user not to use
his preferred background color? I'm the guy who knows what my foreground
color is, and who is responsible for doing what little I can to assure its
visibility against the background, that's who I am.

Jul 20 '05 #7

P: n/a
Lauri Raittila wrote:
user may have set:
* {background:url(orange.jpg)}
and author:
h1 {background-color:blue;color:yellow;}

It will result yellow on orange.jpg


No, it will result in yellow on blue, with orange.jpg surrounding the box.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #8

P: n/a
Lauri Raittila wrote:

user may have set:
* {background:url(orange.jpg)}
and author:
h1 {background-color:blue;color:yellow;}

It will result yellow on orange.jpg


Seems to me that the user should take responsibility for their own
actions. If they are silly enough to set background without also setting
foreground, then they get what they deserve. No?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #9

P: n/a
Brian wrote:
Lauri Raittila wrote:
user may have set:
* {background:url(orange.jpg)}
and author:
h1 {background-color:blue;color:yellow;}

It will result yellow on orange.jpg


No, it will result in yellow on blue, with orange.jpg surrounding the box.


You are wrong.

See
http://www.student.oulu.fi/~laurirai...ackground.html
Move
Line starting with * to your user-css, if you don't believe otherwise.

If you are using Opera, you test that in 15 seconds, btw...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #10

P: n/a
kchayka wrote:
Lauri Raittila wrote:

user may have set:
* {background:url(orange.jpg)}
and author:
h1 {background-color:blue;color:yellow;}

It will result yellow on orange.jpg


Seems to me that the user should take responsibility for their own
actions. If they are silly enough to set background without also setting
foreground, then they get what they deserve. No?


Exactly same happens if user sets color and background image (user don't
need to care about background color, as he can be sure background image
is always used - so it don't make any diffrence eiher.)

User:
* {background:url(orange.jpg);color:blue;}
and author:
h1 {background-color:blue;color:yellow;}

The problem here is that author uses more spcific selector. Of course,
this example is stupid. But lets take some example, that is more likely
to happen:

User:
body {background:url(gray.jpg);color:black;}
Author:
body.news {background-color:#fff;color:#777;}

Which one you think does wrong? If you say it is user, remember that
there is not necessarily any other way to set page background image.

(#777 is bit darker than middle gray, maybe posible to read on white, but
most likely not on light grey background image)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #11

P: n/a
Lauri Raittila wrote:
Brian wrote:
Lauri Raittila wrote:
user may have set:
* {background:url(orange.jpg)}
and author:
h1 {background-color:blue;color:yellow;}

It will result yellow on orange.jpg
No, it will result in yellow on blue, with orange.jpg surrounding
the box.


You are wrong.

See http://www.student.oulu.fi/~laurirai...ackground.html


I see yellow on blue text, but then I don't have "orange.jpg" so I
cannot really test it.
Move Line starting with * to your user-css, if you don't believe
otherwise.
I did. But I don't have the jpg, so it didn't help. I tried to find the
image you were using, but got a 404 error for aproved_aaa.gif.
If you are using Opera, you test that in 15 seconds, btw...


Shameless plug! :-)

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #12

P: n/a
Brian wrote:
Lauri Raittila wrote:

See http://www.student.oulu.fi/~laurirai...ackground.html


I see yellow on blue text, but then I don't have "orange.jpg" so I
cannot really test it.


On that URL? Really? Shit, I had removed an " from code accidentally. Try
again.
Move Line starting with * to your user-css, if you don't believe
otherwise.


I did. But I don't have the jpg, so it didn't help. I tried to find the
image you were using, but got a 404 error for aproved_aaa.gif.


Hm. I can access it 3 different places (university network, local isp
network, and delorie.com finds it too)

I can't understand how you could get 404, exept if server I'm using is
giving you wrong error code.
If you are using Opera, you test that in 15 seconds, btw...


Shameless plug! :-)


I try to make up my mistake on opera.beta yesterday...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #13

P: n/a
Lauri Raittila wrote:
Brian wrote:
Lauri Raittila wrote:

See http://www.student.oulu.fi/~laurirai...ackground.html


I see yellow on blue text


On that URL? Really? Shit, I had removed an " from code accidentally.
Try again.


Same, yellow on blue text. Checked in Opera 7.23 and Mozilla 1.6. (We
must be talking past each other.)
I tried to find the image you were using, but got a 404 error for
aproved_aaa.gif.


Hm. I can access it 3 different places (university network, local isp
network, and delorie.com finds it too)


The image is there now. (Mabye I didn't copy&paste correctly before.)

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #14

P: n/a
Brian wrote:
Lauri Raittila wrote:
Brian wrote:
Lauri Raittila wrote:
See http://www.student.oulu.fi/~laurirai...ackground.html
I see yellow on blue text On that URL? Really? Shit, I had removed an " from code accidentally.
Try again.

Same, yellow on blue text. Checked in Opera 7.23 and Mozilla 1.6.


http://www.student.oulu.fi/~laurirai...ackground.html

I tested using Opera 7.5p6 and Firebird 0.7 and IE5.5 and Opera 6.12

All show yellow text on background image.
(We must be talking past each other.)


This is quite strange.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #15

P: n/a
On Wed, 12 May 2004 01:01:43 +0300, Lauri Raittila
<la***@raittila.cjb.net> wrote:
Brian wrote:
Lauri Raittila wrote:
> Brian wrote:
>> Lauri Raittila wrote:
>>> See http://www.student.oulu.fi/~laurirai...ackground.html
>> I see yellow on blue text
> On that URL? Really? Shit, I had removed an " from code accidentally.
> Try again.

Same, yellow on blue text. Checked in Opera 7.23 and Mozilla 1.6.


http://www.student.oulu.fi/~laurirai...ackground.html

I tested using Opera 7.5p6 and Firebird 0.7 and IE5.5 and Opera 6.12

All show yellow text on background image.
(We must be talking past each other.)


This is quite strange.


Background shows for me on Opera 7.23 and IE5.5. Might be you, Brian.
Jul 20 '05 #16

P: n/a
Lauri Raittila wrote:

User:
body {background:url(gray.jpg);color:black;}
Author:
body.news {background-color:#fff;color:#777;}

Which one you think does wrong? If you say it is user, remember that
there is not necessarily any other way to set page background image.


Don't get me wrong - I'm as much in favor of user-customized browsing as
the next person (more than most, I'd say), but if particular colors are
that important to the user, they can (should?) use !important rules
and/or set their browser to ignore author colors. Most browsers have
this option. Heck, even NS4 has it, or something resembling it.

An author should take reasonable steps to see that they have set both
foreground and background colors for all elements (even if they are
inherited), but you can't expect miracles. In your example above, I
think the author took reasonable steps to see that both foreground and
background colors were set. It would take a miracle, however, for the
author to anticipate that user style rule.

If a user chooses to override author styles, the onus is on them to take
more aggressive steps to see that they get what they need.

IMO, of course.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #17

P: n/a
Lauri Raittila wrote:
http://www.student.oulu.fi/~laurirai...ackground.html

I tested using Opera 7.5p6 and Firebird 0.7 and IE5.5 and Opera 6.12

All show yellow text on background image.
Now I see it. Confirmed in O7.23, Moz 1.6, *and* IE 5.5, all on Win.
This is quite strange.


I think maybe it was a cache issue.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #18

P: n/a
kchayka wrote:
Don't get me wrong - I'm as much in favor of user-customized browsing as
the next person (more than most, I'd say), but if particular colors are
that important to the user, they can (should?) use !important rules
and/or set their browser to ignore author colors.
The point here is that those aren't that important to user, he just uses
them for normal surfing - ie instead of white default background
something bit nicer. I use different background color for body myself, I
can't think why someone wouldn't like to use background image instead of
color. BTW, I wonder why I didn't get it already, but all you need is
this:

User:
body {background:url(gray.jpg);color:black;}
Author:
body {background-color:#fff;color:#777;}

And confusion is ready.
Most browsers have
this option. Heck, even NS4 has it, or something resembling it.
That is not the point.
An author should take reasonable steps to see that they have set both
foreground and background colors for all elements (even if they are
inherited), but you can't expect miracles. In your example above, I
think the author took reasonable steps to see that both foreground and
background colors were set.
It takes *less* time and effort to make sure that background image is
also set. All you need to do is not to write "-color".

Why do you think author should use both color and background-color, but
not background-image? I would say that this is because it has not been
repeated over and over, like color/background-color issue. People have
argumented against that with exactly same arguments.
It would take a miracle, however, for the
author to anticipate that user style rule.
Well, I disagree.
If a user chooses to override author styles, the onus is on them to take
more aggressive steps to see that they get what they need.


Notice, user *is*not*overriding* anything. It is author, who overrides
users color, but does not override users background.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #19

P: n/a
Lauri Raittila <la***@raittila.cjb.net> wrote:
User:
* {background:url(orange.jpg);color:blue;}
and author:
h1 {background-color:blue;color:yellow;}

The problem here is that author uses more spcific selector.


No, the author's rule wins by virtue of being an author's rule. In the
absence of an !important specifier, author trumps user, and this takes
place in the cascade before even getting at specificity issues.

But the result is the same: for an h1 element, background-image has the
value url(orange.jpg) and color has the value yellow (and
background-color has the value blue, but this has no visible effect when
the browser is able and configured to display background images).

It's somewhat theoretic, though, since those users who know how to set up
a user style sheet to use a background image probably also know that web
pages are generally so poorly designed that it is best to use !important
for both the background setting and the color setting.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #20

P: n/a
Lauri Raittila wrote:
kchayka wrote:
Don't get me wrong - I'm as much in favor of user-customized browsing as
the next person (more than most, I'd say), but if particular colors are
that important to the user, they can (should?) use !important rules
and/or set their browser to ignore author colors.


The point here is that those aren't that important to user, he just uses
them for normal surfing - ie instead of white default background
something bit nicer.


So far, everything you say indicates that it's the author's
responsibility to make sure users don't shoot themselves in the foot
with their own user stylesheets. I think that's pretty darned unfair.
If a user chooses to override author styles, the onus is on them to take
more aggressive steps to see that they get what they need.


Notice, user *is*not*overriding* anything. It is author, who overrides
users color, but does not override users background.


In this case I think you are wrong. Author styles override the default
colors in your browser prefs. No browser that I know of lets you set a
default background image in prefs, so it must go in a user stylesheet.
The whole point of user stylesheets is to override author styles.

We keep telling authors that if they're going to set a background image,
they need to set background color, too. But you're saying that users
don't have to bother, and authors should accomodate stoopid users that
do this? That's going a bit too far, methinks.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #21

P: n/a
kchayka wrote:
Lauri Raittila wrote:
kchayka wrote:
So far, everything you say indicates that it's the author's
responsibility to make sure users don't shoot themselves in the foot
with their own user stylesheets. I think that's pretty darned unfair.
Well, setting color and background color is already that, this is no way
different. Of course, it is less likely that user sets background color.
If a user chooses to override author styles, the onus is on them to take
more aggressive steps to see that they get what they need.


Notice, user *is*not*overriding* anything.


In this case I think you are wrong.


Why don't you read spec?
Author styles override the default colors in your browser prefs.
As well as any userstylsheet rules that don't have !important keyword.
No browser that I know of lets you set a default background image in prefs,
Well, browsers change in time. There is not browser that renders floats
right either, but there might be one day.
so it must go in a user stylesheet.
The whole point of user stylesheets is to override author styles.
No it certainly is not. I have dozens of line whiout !important rule in
my userstyles. Thaey are ther to set the defaults browsers dont' have ui.
And share users settings between different browsers.

You obviously don't have much experience of userstyles. I had over 10kB
userstyle with Opera 6...
We keep telling authors that if they're going to set a background image,
they need to set background color, too. But you're saying that users
don't have to bother, and authors should accomodate stoopid users that


I am not saying that. Users of course need to set both color and
background, when they are overriding authors rules. When authors are
overriding users rules, author makes sure about that.

The reason is that there just is no choise, exept to hope for best.

If you set background color, you should always set background image too,
because just like unsuitable color, unsuitable image can make text
impossible to read.

And, even if it is not that likely that user uses background image, it is
absolutely no trouble for author to use background shorthand property,
instead background-color property.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #22

P: n/a
On Thu, 13 May 2004, Lauri Raittila wrote:
Well, setting color and background color is already that, this is no way
different. Of course, it is less likely that user sets background color.


If the user follows best practice then whenever they set a text colour
they will also set a background colour, and vice versa, just as the
author should do. Otherwise the cascade could result in inappropriate
combinations (i.e low contrast or even no contrast at all).
Jul 20 '05 #23

P: n/a
Alan J. Flavell wrote:
On Thu, 13 May 2004, Lauri Raittila wrote:
Well, setting color and background color is already that, this is no way
different. Of course, it is less likely that user sets background color.
^^^^^^^^^^^^^^
Meaned background-image
If the user follows best practice then whenever they set a text colour
they will also set a background colour, and vice versa, just as the
author should do. Otherwise the cascade could result in inappropriate
combinations (i.e low contrast or even no contrast at all).


Exactly, and same applies to background image. What I'm trying to say is
that all *three*, color, background-color and background-image should be
set to avoid inappropriate combinations

Because user knows his browser settings, he can set just one of those, as
if Author overrides some of them, it makes no difference feather user set
all three, or just one.

OTOH, author setting color/backgound always need to set both, as there is
users settings and stylesheet that he don't know behind his stylesheet in
cascade.

When user overrides authors colors using !important, he *also* needs to
make sure he runs over all those properties - and for him it is much more
important to use also background-image, as authors are much more likely
to use background images, and not only for body

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #24

P: n/a
On Thu, 13 May 2004, Lauri Raittila wrote:
Alan J. Flavell wrote:
If the user follows best practice then whenever they set a text colour
they will also set a background colour, and vice versa, just as the
author should do. Otherwise the cascade could result in inappropriate
combinations (i.e low contrast or even no contrast at all).
Exactly, and same applies to background image. What I'm trying to say is
that all *three*, color, background-color and background-image should be
set to avoid inappropriate combinations


Yes, I agree.
Because user knows his browser settings, he can set just one of those, as
if Author overrides some of them, it makes no difference feather user set
all three, or just one.
Sorry, I don't quite get that? In a specific instance, yes, if the
user knows about the page that they are dealing with, they can
override it; but if the user (or some third party) is designing - let
us say - a more-general accessibility stylesheet for unusual browsing
situations, which will be applied to arbitrary author stylesheets,
then they need to apply the same logic, in order to be sure that they
will not have an inappropriate combination of author and user
specifications at the end of the cascade.
When user overrides authors colors using !important, he *also* needs to
make sure he runs over all those properties - and for him it is much more
important to use also background-image, as authors are much more likely
to use background images, and not only for body


I think we basically agree!

all the best
Jul 20 '05 #25

P: n/a
Alan J. Flavell wrote:
On Thu, 13 May 2004, Lauri Raittila wrote:
Because user knows his browser settings, he can set just one of those, as
That is really true only for html element (which I happen to use to set
my background color)

Also, User can take risks, like I force links to be blue, and hope that
background won't be blue too. As user that makes such desision, is also
able to fix site with blue on blue, if his userstyle causes bad
combination. Author can't take risks on that, because he can't fix things
for each surfer.
Sorry, I don't quite get that?


I agree it was bit oddly stated, didn't mean it like I wrote.
When user overrides authors colors using !important,
Or something else...
he *also* needs to
make sure he runs over all those properties - and for him it is much more
important to use also background-image, as authors are much more likely
to use background images, and not only for body


I think we basically agree!


Yes.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #26

This discussion thread is closed

Replies have been disabled for this discussion.