CSS: Backgrounds (Page 1 of 5 )
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.
Next: How to Set the Background Color >>
More Style Sheets Articles
More By James Payne
