CSS deemed incomplete without bacground-color?

[hotfusion]

The problem:
I wish to have text positioned on the page, but for the background pattern to be visible beneath the text. No problem as I simply don't stipulate a background-color in the CSS, thus:
____________________________
p.line1
{
text-indent:0em;
text-align:center;
font-size:30pt;
color:#ff6633;
font-style:italic;
font-weight:bold;
line-height:1em;
}
____________________________

I also do the same for DIVs containing text, but WC3 don't like this, and suggest I should also declare a backgound-color.
How is this possible whilst still retaining the transparency of the element?

Web site in question is in the signature link.

(Be gentle with me, I'm still learning the basics!)

Many thanks,
Andy.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:

http://myweb.tiscali.co.uk/andyspatch/index.htm

 

[Fendal]

 background-color:transparent;

 

[hotfusion]

I didn't realise you could use that, so I tried and still The WC3 CSS validation service tells me:
"You have no background-color with your color : p.line1"

Any other ideas how I can get this to validate but still retain the properties I require?
Andy.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:

http://myweb.tiscali.co.uk/andyspatch/index.htm

 

[rpgfan3233]

This is one of the updates to the previous version of the CSS validator, I think. It's just a recommendation that if you change the color of your text, you should also change the background. Here is an example of why:

<div style="background-color: black">
    <span style="color: black">This will appear to be invisible.</span>
</div>

I'm not sure what to do about this error. I'm wondering if a comment has been made about this yet (in their Bugzilla bug list or on one of the mailing lists).

 

[hotfusion]

Yes, it makes sense to state the colour of the text and the background nornally, but this WC3 recommendation falls on its face if you wish to use an image as the background, as in this case.

Maybe for the moment I'll have to accept that my CSS won't be 'error free', at least in this respect, unless anyone has any further ideas for how to get around this validation issue.

Andy.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:

http://myweb.tiscali.co.uk/andyspatch/index.htm

 

[BillyRayPreachersSon]

I'll have to accept that my CSS won't be 'error free'

But your CSS is error free - which is why you see "Congratulations! This document validates as CSS!" at the top of the W3C validator page after running your code through it.

What you are seeing are warnings... general advice about things that could potentially case problems in some cases. In your case, they do not cause problems, so you can ignore them.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[hotfusion]

I don't get the 'congratulations' bit, as I'm using this CSS validation service:

http://jigsaw.w3.org/css-validator/

This allows me to browse to my CSS file locally.

The bit about the warnings is true, however, now I've studied it without the panic response!

There were no errors as such found, but several warnings about not stipulating a background colour.

I think that in response to your post, I will accept things as OK until I find a more solid way of doing things, like not having a background image for instance!

Many thanks for your opinions.
Andy.



Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:

http://myweb.tiscali.co.uk/andyspatch/index.htm

 

[Foamcow]

Yes, it makes sense to state the colour of the text and the background nornally, but this WC3 recommendation falls on its face if you wish to use an image as the background, as in this case.

No it doesn't.
What happens if the image doesn't load for some reason?
You can specify a background colour as well as the image, perhaps a similar colour to the background image. So if the image doesn't load, the text is still legible.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[hotfusion]

Yes, I tried that but found that by specifying a background colour, the element concerned then has a background of that colour, over the top of, and regardless of, the background image.

Is it possible, perhaps, to code the CSS to give priority to a background image, but to fall back on a background colour should the user agent have images disabled, for instance?

I recall doing something like this in HTML in the BODY element - I'd have to search through my archives to find out how - but I want to use CSS wherever I can, and as I learn how.
Thanks,
Andy.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:

http://myweb.tiscali.co.uk/andyspatch/index.htm

 

[ChrisHunt]

You need to assign a fallback background colour to the element that you assign the background image to, not those that overlay it. Something like this:

body {
   background: #999 url(/images/background.gif);
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[rpgfan3233]

I found a fix for it (though it isn't exactly appealing):

background-color: inherit /* when setting 'color', but not 'background-color' */
color: inherit /* when setting 'background-color', but not 'color' */

 

[hotfusion]

Message received.
It'll be a day or five before I get the time to try those solutions - I'll let you know how it turns out.
Thanks,
Andy.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:

http://myweb.tiscali.co.uk/andyspatch/index.htm

 

[Foamcow]

the element concerned then has a background of that colour, over the top of, and regardless of, the background image.

That's not right. Are you sure that is what is happening?
A background image normally appears effectively on top of any colour applied to the background of an element.

Can you show me an example of what you are experiencing?

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[ChrisHunt]

I think his situation is something like this:

body {
   background: url(somepic.gif);
}

p {
   color: white;
   [i]background: green;[/i]
}

If he applies the background to the <p>, it overlays the <body> image. If he leaves it out, the validator gets shirty. Personally I'd leave it out and ignore the warnings. [tt]background: transparent;[/tt] would work too.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[hotfusion]

Sorry about the confusion, foamcow, ChrisHunt has it correct.
However, by discussing the problem here it is now becoming obvious to me what the correct course of action might be.

My CSS for BODY selector is this:
------------
background-image:url(paper.gif);
color:#000000;
background-color:#dfdfdf;
------------
I'm now assuming I can make a similar declaration for every selector concerned. I'm unsure as to why this didn't click to start with - lack of familiarity I suppose.... Too much alcohol??

Just need to test this out and see if the background image tiles seamlessly with the BODY image, or whether it tiles separately with a noticeable join.

Much to try out at the weekend!
I'll post how this latest attempt works out.
Thanks all for your involvement.
Andy

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:

http://myweb.tiscali.co.uk/andyspatch/index.htm

 

[Foamcow]

Unless the elements sitting on the body have a different background.. and from what I can gather you just want the paper.gif image to show through, then use

background:transparent;

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK