November 30th, 2003 05:56 PM
* CSS Backgrounds *
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.
color-rgb, color-hex, color-name, transparent
See the examples below.
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.
“url” will use an image that you define.
“none” will not have a background image.
url = background-image: url(“image.jpg”)
none = background-image: none
“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.
scroll = background-attachment: scroll
fixed = background-attachment: fixed
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos
“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%.
center center = background-position: center center
x-% y-% = background-position: 50% 50%
x-pos y-pos = background-position: 50px 50px
repeat, repeat-x, repeat-y, no-repeat
“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.
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…
Which can also be displayed as:
background-position: center center
background-color: #000000;background-image: url(image.jpg);background-position: center centerbackground-attachment: fixedbackground-repeat: 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.
background-color: #000000 url(image.jpg) center center fixed no-repeat
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).
\"We change by the speed of the choices that we make.\"