This n That Graphics



Style Sheets Title

Background and Color Properties

Don't forget:   If using CSS rules within the open and close <Style> tags or in an external style sheet, use the curly braces " {   } " to state the rule. Do Not use the curly braces when using inline styles.
Property
Description
Style
background This property allows you to specify any and all background properties at one time. Property order is not important. Any property that is not specified will use the default value.

Remember that background properties can be applied not only to you document background in the <BODY> tag, but you can also specify background properties for Tables, and other HTML elements.
<BODY STYLE="background-color: #AAE9DD; background-image:
url('til05v15.jpg'); background-repeat: repeat-y; background-position: 40px">



(See it)
background-attachment Similar to the Microsoft's "BGPROPERTIES", this property determines whether to allow the background to scroll or stay fixed.

"Scroll" is the default value. Therefore, there is no need to set it if you want the background to scroll - (just leave out the background-attachment property out).
BODY  {background-image:
  url("http://www.mysite.com/image.gif");
  background-attachment: fixed}



  (See it)
background-color Use this property to set the background color of an element.

Values can be a color name or numeric color value or "Transparent" which renders the Html element as transparent.
<SPAN STYLE="background-color:
#6699FF">This text has a background color.</SPAN>

This text has a background color.

  (See it) - Document and Table
     example.
background-image Use this property to set a graphic image as the background image.

You can set the document background, table background, table column to an image.

Important. Some versions of Netscape, require that the image be in the same directory as the web page. To get around this problem, you can use an absolute URL instead of a relative URL.
<BODY STYLE="background-image:
url("image.jpg");">

(See it)
background-position This property is used to specify the X,Y position of a background image.

Position valuses can be either:

Precise X, Y pixel values from top-left corner. The distance is relative to the element and not the document as a whole unless the property is set for the <BODY> element.

X%, Y% value in reference to the dimensions of the browser window

Keywords: "Left", "Center", "Right", or "Top", "Center", "Bottom".
<DIV STYLE="background-position: center; background-image: url('smile.gif')"><BR><BR><BR></DIV>




background-repeat The background repeat property determines how a background image is tiled on a page.

Values can be:

"repeat" which is the default value. This causes the image to repeat horizontally and vertically on the page.

"repeat-x" which limites the image to horizontal tiling.

"repeat-y" which limites the image to vertical tiling.

"no-repeat" which prevents the image from tiling.
<DIV STYLE="background-position: center; background-image: url('smile.gif'); background-repeat: no-repeat"> <BR><BR></DIV>







  Page 1 of 1  
Page added on 09-24-2001
Site Map Home