This can be found at http://digitalzen.org/tutorials/css-backgrounds.html as of 11-30-03

Oh, and this isn't a Cross Site Scripting (Which is actually XSS) tutorial.. It's Cascading Style Sheets (Which is CSS).

  • Tutorial: CSS Backgrounds


This tutorial covers the modification of backgrounds using Cascading Style Sheets (CSS). If you do not have any previous experience with CSS, you should read Tutorial: Basic CSS before continuing with this one.

The easiest way to teach you about the backgrounds is to simply show examples and an explanation for each. Firstly, know that these all belong within the “body” selector.

Property:
background-color
Values:
color-rgb, color-hex, color-name, transparent
Descriptions:
See the examples below.
Examples:
color-rgb for black = background-color: 0,0,0
color-hex for black = background-color: #000000
color-name for black = background-color: black
transparent is to be used in place of a color to have a transparent background.

Property:
background-image
Values:
url, none
Descriptions:
“url” will use an image that you define.
“none” will not have a background image.
Examples:
url = background-image: url(“image.jpg”)
none = background-image: none

Property:
background-attachment
Values:
scroll, fixed
Descriptions:
“scroll” will cause the background image to scroll with the rest of the page.
“fixed” will cause the image to remain fixed in place as a watermark.
Examples:
scroll = background-attachment: scroll
fixed = background-attachment: fixed

Property:
background-position
Values:
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos
Descriptions:
“top left” through “bottom right” are self descriptive.
“x-% y-%” is based on percents. The X value defines the horizontal position while the Y value defines the vertical position of the image on the page. 0% 0% is the top left corner, while 100% 100% is the bottom right corner of the page. If only one value is specified the other will default to 50%.
“x-pos y-pos” can be any CSS unit such as pixels (0px 0px) 0 0 is the top left corner, and as above, if only one value is set, the other will default to 50%.
Examples:
center center = background-position: center center
x-% y-% = background-position: 50% 50%
x-pos y-pos = background-position: 50px 50px

Property:
background-repeat
Values:
repeat, repeat-x, repeat-y, no-repeat
Descriptions:
“repeat” will set the background to repeat downward and to the right from its starting position.
“repeat-x” will set the background to repeat to the right of its starting position.
“repeat-y” will set the background to repeat downward from its starting position.
“no-repeat” will set the background image to display only once.
Examples:
repeat = background-repeat: repeat
repeat-x = background-repeat: repeat-x
repeat-y = background-repeat: repeat-y
no-repeat = background-repeat: no-repeat

And now for a couple of complete examples…
Code:
Body {
background-color: #000000;
background-image: url(image.jpg);
background-position: center center
background-attachment: fixed
background-repeat: no-repeat
}
Which can also be displayed as:
Code:
Body {
background-color: #000000;background-image: url(image.jpg);background-position: center centerbackground-attachment: fixedbackground-repeat: no-repeat}
and…
Code:
Body {
background-color: #000000 url(image.jpg) center center fixed no-repeat
}
All three examples will create the same end result. Thus, there is no one correct way to write a CSS. It’s all up to personal preference. This concludes the CSS Backgrounds tutorial, and I hope you found it helpful.

-Zen




This Tutorial ©2003 FallenZen. If you wish to use this tutorial on your site, please leave this credit intact.
Check out The DigitalZen (http://www.digitalzen.org).