In the last tutorial we discussed the basics and syntax of CSS, where to write the files and how to apply them to our pages. In this brilliant article, we will go over how to apply styles to backgrounds and text. So let's get busy.
To apply a style to a background, we use one of the various background properties. You can use the background property not only with the page, but other elements as well, such as text and tables. Speaking of tables, here is a nifty one showing you a list of available background properties:
Name of Property
What it Does
Associated Values
background
Sets all background properties in a single declarative statement
background-color
background-image
background-repeat
background-attachment
background-position
background-attachment
Allows you to determine if a background image scrolls with the page or is fixed
scroll
fixed
background-color
Allows you to set the background color of a given element
color-rgb
color-hex
color-name
transparent
background-image
Allows you to set an image for your background
url
background position
Allows you to set the starting position of your background image
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat
Allows you to set whether or not a background image will repeat, and if so, how it will do so
repeat
no-repeat
repeat-x
repeat-y
Setting Every Background Property with the Background Shortcut
In this example we will use the background property to set all of the background attributes of the body and paragraphs:
<html>
<head>
<style type="text/css">
body
{
background: black url('welcom.gif') no-repeat fixed center;
}
p
{
background: green left}
}
</style>
</head>
<body>
<p>The matrix has you</p>
</body>
</html>
This is the result of the above code:
Every paragraph you type will have the same attributes as the first.