Collected by
Elizabeth Janson
Home Page

Background Images

URL + URN = URI

URLs (Uniform Resource Locators) provide the address of a resource on the Web. An expected new way of identifying resources is called URN (Uniform Resource Name). Together they are called URIs (Uniform Resource Identifiers). I am used to the term URL.

The format of a URI value is 'url(' followed by optional whitespace followed by an optional single quote (') or double quote (") character followed by the URN itself, followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. The two quote characters must be the same (quote pairs must match!).

Uneven Background Colors

From www.netmechanic.com/ news/vol4/css_no17.htmAt times, you want an element to have a different background color than the rest of the document. It's a good way to add contrast and draw visitors' attention to important information.

The standard way to add background color is like this:

P {background:yellow}

When you apply that style definition in the document, you expect the entire paragraph to have a yellow background. That's what you get in Explorer and Netscape 6.x, but Netscape 4.x versions only put the background color behind the text.

Avoid this ragged effect by adding a 1 pixel border to the style declaration and setting the border color to the same color as your background.

P.contact {background:yellow; border:1px yellow}

That will give you the effect you want in both Netscape and Explorer.

background-image:url(30.gif)

Background images are the same as a background colour, but use an image you specify instead of a colour. Also, you have to write it a little differently, using a url call:

After the colon, you write "url". Then you put the url inside a set of parentheses, with no quote marks around it. Here it is in action:

Can you even read this?

And we get a background that no one can read over!
Try again with the witch

<SPAN style="background-image:url(30.gif)">Can you now read this?</SPAN>
Can you now read this?

And of course, the table:

<TABLE style="background-image:url(30.gif)" border="1">
<TD>AAAGH! Can you read this?</TD>
</TABLE>

And you get the image background (still using the witch).....

AAAGH! Can you read this?

And how about a form textarea this time? Well, O.K.....

Now try filling out THIS form.........

Email
CSS begins here

Back to Using colours, or on to text.
Backgrounds may be used as left side panels.

This page is part of Elizabeth Janson's web site

http://www.geocities.com/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.