css background image positioning

Question

Hi guys,

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=4949contextual.png

Answer 1

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

Answer 2

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;
}