More on Css Backgrounds: Part 2

Home/DHTML/CSS/Backgrounds 3

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:

no-repeat 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:

repeat-x example

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:

repeat-y example

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:

no-repeat & center example

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:

repeat-y & right example

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, and let me know if it works in a browser I didn't list up at the top. I'll add it in for everyone.

Well, that's all for now. See you when I write the next section!

Partners

CoolHomepages | Web Design Library | Website Content

More on Backgrounds: Part 2