Lesson-12 (More on Backgrounds)

 

When this was written, these properties worked with Internet Explorer 5+, but Netscape 4 seemed to only recognize the background-repeat properties.

Using some style sheet properties, we can do some new things with background images such as telling it not to repeat, fixing it, and giving it a starting position. First, let's look at the properties we can use with the backgrounds:

Property	Possible Values
background-image:url(url)	URL of image to be used
background-repeat:value	repeat, no-repeat, repeat-x, repeat-y
background-attachment:value	scroll, fixed
background-position:value1 value2	value1: top, center, bottom, pixel number, percentage value2: left, center, right, pixel number, percentage

Using the Properties

To use the properties, you can set up a style sheet in your head section (or an external file). I'm going to take the quick way here and use one in a head section that defines the style for the body tag:

<STYLE type="text/css">

 <!--

 BODY { background-image:url(bgpr1.gif);

               background-repeat:no-repeat }

 -->

</STYLE>

The use is the same as other style sheet properties with the exception of the url value and the background-position using two values. We will get to those in more detail later, when we look at what they do. As with other styles, we can use as many of the properties as we want, we just add them in. Here is a sample with all the properties set up:

<STYLE type="text/css">

 <!--

 BODY { background-image:url(bgpr1.gif);

               background-repeat:no-repeat;

               background-position:bottom right;

               background-attachment:fixed }

 -->

</STYLE>

This is the background I have set up on this page (if you have IE it is fixed at the bottom right). It uses the image bgpr1.gif, doesn't repeat, is located at the bottom-right, and is fixed at that position.

background-image:url(url)

This property defines the url of the image to be used. With this property, we only need to change the url inside the ( ) characters. You can use a local or absolute url as you can in an HTML tag. Note that no quotes are needed in the style command like in an HTML command:

<STYLE type="text/css">

 <!--

 BODY { background-image:url(http://yoursite.com/image.gif) }

 -->

</STYLE>

Once you have your image url in there, the background should display on the page.

background-attachment:value

This one can use one of two values:

background-attachment:scroll

background-attachment:fixed

If you choose scroll, it is the same as leaving the command out, the background will scroll along with the page. If you choose fixed, the background will remain in place while the page contents scroll over it. Here is a sample of code to make a fixed background:

<STYLE type="text/css">

 <!--

 BODY { background-image:url(http://yoursite.com/image.gif);

               background-attachment:fixed }

 -->

</STYLE>

This will add a background and fix it in position. After this though, we will want to use the other properties to make it do something different.