Lesson-13 (More on Backgrounds-2)

 

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

In the last section, we looked at the bacground properties and how to use a couple of them. In this section, we will look at the newer (and more fun) properties we didn't cover in the last section-- the background-repeat and background-position properties.

background-repeat:value

This one can have several values, here are the possibilites:

background-repeat:repeat

background-repeat:no-repeat

background-repeat:repeat-x

background-repeat:repeat-y

If you use repeat, it is the same as leaving off the repeat property, the background will repeat over the whole page. On the other hand, using no-repeat you can make the background image appear only once on the page, without repeating itself. By default, it would sit at the top-left of the screen, as seen below using a trash can background as an example:

We can change the position using the position properties which we will look at in a minute.

If you use repeat-x, the background will repeat, but only in the horizontal direction. If we use this, we can only change the top position, as it will repeat all the way across the screen and make the "left-right" position not work. It would look something like the example below:

Using repeat-y, the background will repeat only in the vertical direction. This time we can give it a left-right position but not a top-bottom position. This would look something like this:

background-position:value value

The two values can be lots of things, here are some samples:

Using top, center, or bottom with left, center, or right

background-position:top right

background-position:center right

background-position:bottom center

Using Pixles and Percentages (from top-left of page)

background-position:200 250

background-position:30% 60%

Notice that the two values are separated by a space and not a comma. It was odd for me at first, but I'm getting better with it. For some reason I just want something other than a space there, maybe I like commas too much...

As an example, if we wanted to center our background image, we would use:

background-position:center center

To do this we must also be sure the background is no-repeat as well. If we want it fixed we will also need to define that. Here is the code to do this:

<STYLE type="text/css">

 <!--

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

               background-repeat:no-repeat;

               background-position:center center;

               background-attachment:fixed }

 -->

</STYLE>

This would give us something like the example below:

Also, you could do something similar with repeat-x and repeat-y. You could tell the image to run across the bottom horizontally if you use repeat-x, or to run along the right side vertically if you use repeat-y. For example, let's do the vertical repeat on the right side:

<STYLE type="text/css">

 <!--

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

               background-repeat:repeat-y;

               background-position:right;

               background-attachment:fixed }

 -->

</STYLE>

Note that with the repeat-y command we didn't need to define the top/bottom position, we only need to define the left-right position, which saves a little writing. The code would give something like this:

Also, you could use the pixel or percentage values to place the image in just about any position on the page. So, I'll leave you with the code we looked at earlier for the background on this page (a background-watermark type thing I suppose):

<STYLE type="text/css">

 <!--

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

               background-repeat:no-repeat;

               background-position:bottom right;

               background-attachment:fixed }

 -->

</STYLE>

So, have fun with the backgrounds.