-
November 30th, 2003, 06:56 PM
#1
Junior Member
* 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.
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).
\"We change by the speed of the choices that we make.\"
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
|