Background Properties

Options

Background properties can be used for many things:

... to define the background on your webpages
... to define the background of tables, and individual cells

That's no biggee; you can do that in HTML as well, but what you can't do in HTML is:

... define the background of individual paragraphs without using tables
... define the background of tags, e.g. your tags
... define the background of your hyperlinks
... define how your background repeats
... position your background image

The background properties that are available for modification are following:

background-color : either hexadecimal or RGB value, colour name, or transparent (no background color)
background-image : none or url
background-repeat : repeat (horizontically and vertically), repeat-x (horizontically), repeat-y (vertically), or no-repeat
background-attachment : fixed or scroll
background-position : top, bottom, right or left, or a combination of two of these, or Xpx Xpx value where starting point is left top

Background Colour & Colour Chart

If I wanted my page to have, say, teal as its background colour I would write one of the following in my internal or external style sheet:

body {background-color : teal;}
body {background-color : #008080;}
body {background-color : rgb(0,128,128);}

In my inline style sheet I would simply incorperate the following into my <body> tag: <body style="background-color : teal;">.

Above codes are only practical if you are using an external style sheet, or are using an external style sheet and want to make an exception to the rule on a single page. Otherwise it's rather like overkill since you might as well have written bgcolor="#008080" in your <body> tag. If you want to make an exception to your external style sheet on more than one page, I suggest you set up a body class.

Let's say I want my tags to have a background colour other than the rest of the page. This effect is great for emphasis. I could write following in my external or internal style sheet:

b {background-color : yellow;}

Or if I was using an inline style sheet and only wanted one paragraph to be affected:

affected text

... which would make my bold text look like this

Ok, so this example looks yucky, but you see what I mean?

The preferred way to indicate background colour is definitely hexadecimal value, e.g. #008080, as RGB values aren't supported by many browsers, even newer ones, and colour names are limited. I have made a chart with the most supported colour names below. The colour names are: black, gray, silver, white, aqua, teal, blue, navy, purple, fuchsia, maroon, red, orange, yellow, lime, green, and olive.

Background Image

To place a background image on my page, I would add to the above internal/external style sheet example:

body {background-color : teal;
background-image : url(mybackground.gif);}

The url prefix to the image file name does not indicate that you should place the url where it says url. The actual url should follow the prefix, e.g.:

body {background-color : teal;
background-image : url(mygraphicsfolder/mybackground.gif);}

Or:

body {background-color : teal;
background-image : url(http://mywebsite/mygraphicsfolder/mybackground.gif);}

Like in the case of the background colour property, you can also define a background image for elements on your pages, e.g. if I wanted my tags to have a background image, I would write in my external or internal style sheet:

p {background-image : url(mygraphicsfolder/mybackground.gif);}

Or if I was using an inline style sheet and only wanted one paragraph to be affected:

Which would make my text look like this.

... and it would affect everything within the tags unless I specified otherwise, including this bold text.

Background Repeat

I used make mile long (well, not mile long, but 1600 pixels wide) sideborder backgrounds or place sideborder backgrounds in tables or frames. This is no longer necessary. I can choose now to make narrow sideborders and determine whether they repeat this way or that. If I had a very large image which I did not want to repeat (large images really look bad when they are repeated), I could accomplish this as well by using the no-repeat option.

Let's say that my background is a sideborder background and I only want it to repeat vertically. The properties would now look like this in my external or internal style sheet:

body {background-color : teal;
background-image : (url)mygraphicsfolder/mybackground.gif;
background-repeat : repeat-y;}

Again you can also apply this property to other elements which have a background image.

Background Attachment

This is an option available in html as well; to scroll the scrollbars without the background following the content. I do not want my background to scroll, so I add another line to my body properties:

body {background-color : teal;
background-image : (url)mygraphicsfolder/mybackground.gif;
background-repeat : repeat-y;
background-attachment : fixed;}

Background Positioning

The default position of a background image is in the top left of the screen. Let's say I want my sideborder background to be on the right, not the left. I would write the following:

body {background-color : teal;
background-image : (url)mygraphicsfolder/mybackground.gif;
background-repeat : repeat-y;
background-attachment : fixed;
background-position : right top;}

There are multiple options on how to position background images. The position can be defined by the words top, bottom, left, right, or any combination of two of these, as well as the word center, or the equivalent percentage of these (see below); the first alignment or percentage indicates the x-axel (horizontal position), the second the y-axel (vertical position).

left top = 0% 0%
center top = 50% 0%
right top = 100% 0%
left center =0% 50%
center = 50% 50%
center right = 100% 50%
left bottom = 0% 100%
center bottom = 50% 100%
right bottom = 100% 100%

Thus I could also write:

body {background-color : teal;
background-image : (url)mygraphicsfolder/mybackground.gif;
background-repeat : repeat-y;
background-attachment : fixed;
background-position : 100% 0%;}

You need not adhere to the percentages above; you can just as well have a style sheet that looks like this:

body {background-color : teal;
background-image : (url)mygraphicsfolder/mybackground.gif;
background-repeat : repeat-y;
background-attachment : fixed;
background-position : 25% 50%;}

You can also determine the positioning by indicating the exact pixel 'address'.

body {background-color : teal;
background-image : (url)mygraphicsfolder/mybackground.gif;
background-repeat : repeat-y;
background-attachment : fixed;
background-position : 50px 100px;}

The starting point is left top when using pixel positioning as in all cases.

xed;
background-position : 50px 100px;}

The starting point is left top when using pixel positioning as in all cases.