How does a person make two background images?


Can you have more than two?

Did you like that? I thought it would be fun to show you what you can do before I tell you how to do it.

The bast on this page are an ordinary background image. But the monkey, diamond and eye are css examples. If you can't see them, please switch to an updated Internet Explorer.

By now you should be able to piece together what I did if I show you the code. This is all of the css code I have on the page:
<style type="text/css">
img.x {position:absolute; left:50px; top:0px; z-index:-1}
img.a {position:absolute; left:50px; top:70px; z-index:-1}
img.b {position:absolute; left:200px; top:80px; z-index:-1}
</style>
And in the document...
<img class="x" src="wmonkey.gif">
<img class="a" src="anim3.gif">
<img class="b" src="eye.gif">
So, the positioning is easy enough to understand. The only new thing is the "z-index" part. Back to math class. X refers to left and right, and Y to up and down. The Z plane if front to back. The main level of considered zero on the Y axis, so everything in front of that (toward you) would be +1, +2 and so forth. Everything behind that would be -1, -2, and so forth. Whew.

So, if you want to push an item behind the main page, you give it a rating of -1. If you wanted to push something even further back, you could give it a -2 rating. Dont get carried away with this. By the way, you can also use this to push an item to the front using positive numbers, but that's the next lesson.