css background image positioning

I need help with positioning two images on a web page. I want both the images to be fixed on the page, so one will be fixed to the top-left of the page and the other will be fixed to the bottom-right. But i also want the background to be black so if there is lots of text or content then both the images will lengthen. Below is an image to help with the question.

http://www.imagecross.com/11/image-hosting-view-53.php?id=4949开发者_开发知识库contextual.png

---

Sample html

<div id="topLeft"></div>
<div id="bottomRight"></div>

CSS:

BODY {
    background-color: black;
}

#topLeft {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottomRight {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Adjust heights and widths to taste

---

Have a go at this - attach the bottom right image to the body tag (with the background colour), and also set the body and html heights to 100%, like so:

html { 
        min-height: 100%;
}

body { 
        background: url('http://cvcl.mit.edu/hybrid/cat2.jpg') no-repeat bottom right #000;
        height: 100%;
}

You can then set the top left image in any div as you would normally, as bemace suggested:

#topLeft {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    top: 0px;
    left: 0px;
}