Collected by
Elizabeth Janson
Home Page

Side Panels

  This page uses 'width=80%' to leave space for the side panel.

A Bug

bug hiding in the flower By far and away the biggest issue affecting style sheet users in relation to color is that of Internet Explorer 3 for Windows' lack of support for backgrounds on TABLE, FORM, TR, TD, TH, BODY and HTML in LINKed style sheets.

Internet Explorer 3 for Windows does not support any of the background properties except for the background shorthand.

How do side panels work?

This page uses <body bgcolor=ivory style="background-attachment: fixed; background-repeat:repeat-y" background="ivyside.gif"> to place the side panel. I had to remove the Style Sheet BODY comment, used on the other pages.

A Decorative Heading

A background image which repeats in this way can be applied to any element in a page.
So, using exactly the same technique as above, but applying it to a heading you have
H1 {background-image: URL(ivyside.gif); background-repeat: repeat-x}

As this did not fill my <TD> space, I substituted
<td style="background-attachment: fixed; background-repeat:repeat-x" background="ivyside.gif">

The five background properties

The shorthand notation for background combines background-color, background-image, background-repeat, background-attachment, and background-position, in that order.

Remember I noted that IE4 allows us to remove the hyphen and capitalise the second word. Check if it works for you.

background-color and background-image

For background-color the valid values are colors, be it rgb, hex, or color name, and transparent, which makes the background transparent.
There are only two values for background-image, none and a url to point to an image object.
Examples:
P.bg1 { background-color: #000000;}
P.bg2 { background-image: url(images/bg1.gif) }

background-repeat

Valid values are: repeat, repeat-x, repeat-y, and no-repeat. The value repeat tiles the background horizontally and vertically. repeat-x only tiles the background in the horizontal direction, and repeat-y goes in the vertical direction. As you might have thought no-repeat does not repeat the background at all.
Example:
<BODY style="background-repeat:no-repeat" background="test.gif">

background-attachment

There are two values for background-attachment, scroll and fixed. A value of "scroll" is what is common with browsers today. The background scrolls along as you do. A value of "fixed" will keep the background fixed, with the text and other goodies scrolling on top of it, as on this page.

background-position

You can specify where the background is to be placed with this property. Valid values are: length, percentage, top, center, bottom, left, right.
For example, the below declaration positions the background image at the lower footnote of the page:
<BODY style="background-position: bottom right" background="test.gif">

Translations of keywords in positioning
  • 'top left' and 'left top' both mean the same as '0% 0%'.
  • 'top', 'top center' and 'center top' mean the same as '50% 0%'.
  • 'right top' and 'top right' mean the same as '100% 0%'.
  • left', 'left center' and 'center left' mean the same as '0% 50%'.
  • 'center' and 'center center' mean the same as '50% 50%'.
  • 'right', 'right center' and 'center right' mean the same as '100% 50%'.
  • 'bottom left' and 'left bottom' mean the same as '0% 100%'.
  • 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
  • 'bottom right' and 'right bottom' mean the same as '100% 100%'.

Shorthand

Here's the classic example that renders a non repeating background image, centered and fixed on the page:
BODY { background: white url(bg1.gif) no-repeat fixed center center }

More playing with side panels

You can have only one side panel per BODY statement. So similar but different side panels for different sections is a nice idea, just needs to be on different pages.

Side panels on paragraphs can be interesting.
Place in the HEAD -
.main {background-image: URL(paper1a.gif); background-repeat: repeat-y}
.news {background-image: URL(paper5.gif); background-repeat: repeat-y}
.men {background-image: URL(green3.gif); background-repeat: repeat-y}

then start each paragraph using the class title, eg <P class="main">.

in the Main section If you have a site that has a number of different sections you may wish to distinguish these sections from one another by giving them similar but different side panels to

in the News section If you have a site that has a number of different sections you may wish to distinguish these sections from one another by giving them similar but different side panels to

in the Members section If you have a site that has a number of different sections you may wish to distinguish these sections from one another by giving them similar but different side panels to

Email
CSS begins here
Back to units, or on to Fonts.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/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.