CSS Need to stretch a background image 100% length of page

[revisedcode]

Noob question need to stretch an image the full length of page, top to bottom.

The image is used as a background for a fixed css theme.
below is sniplet of code

#framecontentRight{
left: auto;
right: 0;
width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-image: url('http://www.a1stonepaving.com/res_edit/media/right_side_bar_bg.jpg');
background-repeat: no-repeat;
color: black;
}

Here is the entire CSS used.


<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0px none;
overflow: hidden;
height: 100%;
max-height: 100%
}

#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 132px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #175142;
color: white;
}

#framecontentRight{
left: auto;
right: 0;
width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-image: url('http://www.a1stonepaving.com/res_edit/media/right_side_bar_bg.jpg');
background-repeat: no-repeat;
color: black;
}

#framecontentTop{
position: absolute;
top: 0;
left: 132px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
height: 179px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-image: url('res_edit/media/header_pic_002.jpg');
background-color: #175142;
color: white
}

#maincontent{
position: fixed;
top: 179px; /*Set top value to HeightOfTopFrameDiv*/
left: 131px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto;
background: #FFFFFF;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 179px 150px 0 132px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}
</style>


Thanks in-advance for helping. :D

[Snookerman]

Unfortunately that can only be done with CSS3 (background-size) and is not supported just yet.

You can however use an image instead as explained in this article:
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm (http://webdesign.about.com/od/css3/f/blfaqbgsize.htm)

Good luck!

[coothead]

Opera, Safari and Konqueror have implemented background-size....

-o-background-size:100% 100%; /* Opera */
-webkit-background-size:100% 100%; /* Safari */
-khtml-background-size:100% 100%; /* Konqueror */
coothead

[revisedcode]

Thx for the info :)



Revisedcode :D

[Snookerman]

You're welcome, glad to help!

Good luck with your site!