Myspace
Background Codes Tutorial
The
following background code removes
of all the default table styling
which enables the table background
to become transparent.
This code
will allow the background image
to become visible:
<style
type="text/css">
table,
td {
background-color:transparent;
border:none;
border-width:0;}
</style>
To change the color
of your background enter the six
digit color code:
The background-color
property lets you change the background
color for your page. For example
to set a background color for your
page, you would use something like
this where color_code would be the
six digit color
code:
<style
type="text/css">
body
{background-color: color_code;}
// Color Code
Chart
</style>
Set
a picture as the fixed background
of your page:
The background-image property
can be used to specify a background
image your page. For example, to
set a background image for your
page, you would use something like
this where image_url would be the
url of the image you would like
to use for your background:
note: using the "background-attachment:
fixed" property makes it possible
for the background to stay fixed
in the same place on the screen
while the page scrolls:
<style
type="text/css">
body{background-image:url("image_url");
background-attachment:fixed;}
</style>
More
background properties:
Just add these properties between
the existing <style>
</style> tags:
Specifying how the background image
tiles:
background-repeat:
repeat
Default setting. Tiles the background
image both horizontally and vertically.
background-repeat:
repeat-x
Tiles the background image
in the horizontal direction only.
Use if you want the background running
across the top of the page.
background-repeat:
repeat-y
Tiles the background image
in the vertical direction only.
Use for left-hand page borders.
background-repeat:
no-repeat
No repeating takes place.
This displays only one copy of the
image. Use if you want to use a
large image that isn't designed
to tile.
Positioning
the background image
background-position:
x% y%
Places the image x%
across the page and y%
down the page. Values of "0
0" indicate the top left hand
corner.
background-position:
x y
Places the image x units
across the page and y units down
the page. For example, "60px
35px" places the image 60 pixels
to the right of the top left corner,
and 35 pixels below it. You can
use any CSS units to specify the
position.
background-position:
<position>
Positions the image using
one of various positioning words.
These are: top left, top center,
top right, center left, center center,
center right, bottom left, bottom
center and bottom right.
Here's an example that results
in a centered picture that will
repeat vertically, with a blue background:
<style
type="text/css">
table,
td {
background-color:transparent;
border:none;
border-width:0;}
body
{
background-color: #3300FF;
background-image: url('image_url');
background-repeat: repeat-y;
background-position: center;}
</style>
|
