Scalable image on the background of the site

Task:
The designer drew the layout of the page, in the background of which was a picture. At first I decided that this is a background that increases in width depending on the resolution of the monitor.
But it was not there. The designer insisted that this is a scalable image that narrows / stretches when the application window changes in both width and height.
In advance warning the customer - that the picture will be loaded 1 and in the maximum resolution - it was identified as 1600, started to work.


Theory:
To implement this functionality, we will need to play around with absolute positioning m . Since we cannot scale the background, we will have to put an image on the bottom layer that will proportionally scale, and on top of it we will have to rely on the site grid.

A schematic representation is shown in the figure.

')
Practice

HTML:

< div id ="page" > <br> < div id ="left" > <br> <br> <br> </ div > <br> < div id ="right" > <br> <br> </ div > <br> </ div > <br><br> < div id ="main" > <br> < div class ="foot" > <br> < ul > <br> < li >< a href ="#" title =" " > </ a ></ li > <br> < li >< a href ="#" title ="" > </ a ></ li > <br> </ ul > <br> < div class ="contacts" > <br> < span class ="copy" > Copyright; © 2009 </ span > <br> </ div > <br> </ div > <br> <!-- --> <br> < div class ="img" >< img src ="img/back_001.jpg" width ="100%" alt ="" title ="" /></ div > <br> </ div > <br> <br> * This source code was highlighted with Source Code Highlighter .

CSS:

1. html {
2. height : 100 % ;
3. }
5. body {
6. margin : 0; padding : 0;
7. height : 100 % ;
8. }
10. a {
11. outline : none ;
12. }
14. / * Wrap pictures * /
15. #main {
16. position : relative ;
17. z-index : 1 ;
18. height : 100 % ;
19. }
20. / * The layer with the picture itself * /
21. #main div .img {
22. display : block ;
23. position : absolute ;
24. bottom : 0; / * picture will always be at the bottom of the page * /
25. z-index : 10 ;
26. min-width : 1000px ;
27. width : 100 % ;
28. _width : expression ( ( documentElement.clientWidth || document .body .clientWidth ) < 1004 ? '1004px' : '100%' ) ;
29. }

1. / * Layer with copyrights and bottom menu * /
2. #main div .foot {
3. position : absolute ;
4. bottom : 80px ;
5. z-index : 20 ;
6. width : 100 % ;
7. height : 30px ;
8. min-width : 1000px ;
9. _width : expression ( ( documentElement.clientWidth || document .body .clientWidth ) < 1004 ? '1004px' : '100%' ) ;
10. }
12. #main div .foot ul {
13. list-style : none ;
14. font : normal 12px Verdana;
15. margin : 14px 0 0 75px ;
16. padding : 0;
17. }
18. #main div .foot ul li {
19. display : inline ;
20. margin : 0 120px 0 0;
21. }
23. #main div .foot ul li a , #main div .foot ul li a : visited { color : #faffcd ; }
24. #main div .foot ul li a : hover { color : # 163133 ; }
26. #main div .contacts {
27. position : absolute ;
28. right : 44px ; top : 14px ;
29. width : 360px ;
30. font : normal 11px Verdana;
31. color : #faffcf ;
32. }
33. / * Site itself * /
35. #page {
36. position : absolute ;
37. top : 0; left : 0;
38. z-index : 30 ;
39. width : 100 % ;
40. overflow : hidden ;
41. margin : 0 0 300px 0;
42. min-width : 1000px ;
43. _width : expression ( ( documentElement.clientWidth || document .body .clientWidth ) < 1004 ? '1004px' : '100%' ) ;
44. }
46. #left {
47. width : 290px ;
48. float : left ;
49. }
52. #right {
53. margin : 0 48px 0 370px ;
54. position : relative ;
55. color : # 4c4f51 ;
56. font : normal 12px / 18px Verdana;
57. }

Using either xa for ie6 "_" or conditional comments is a matter of taste. <br /> Please do not arrange holivars :)

Everything seems to be good, but we need to set the height of the image wrapper block (div id = "main") equal to the height of the layer with the data div id = "page" + 400px - the height from the image, otherwise we will have the site content and image live separate lives. For this purpose, we will use JS, which we will hang on onload
Js

1. < script language = "javascript" >
2. function test ( ) {
3. var h = 400 + document. getElementById ( 'page' ) . offsetHeight ;
4. if ( h > 600 ) {
5. document. getElementById ( 'main' ) . style . height = h + 'px' ;
6. }
7. }
8. </ script >

Example
Because of the hosting banner in the FF white bar :) in IE all the way

Bug fix
I forgot about large monitors for this we calculate the height of the window

function test(){<br> var client = document .compatMode== 'CSS1Compat' && !window.opera? document .documentElement.clientHeight: document .body.clientHeight; ;<br> var h = 270 + document .getElementById( 'page' ).offsetHeight;<br> if (h > client) { <br> document .getElementById( 'main' ).style.height = h + 'px' ;<br> }<br> } <br><br> * This source code was highlighted with Source Code Highlighter .

CSS change

<br>#main {<br> position: absolute;<br> top:0; left:0; right:0; bottom:0;<br> z-index: 1;<br> height:100%;<br>} <br><br> * This source code was highlighted with Source Code Highlighter .

I would be glad if someone has a usefulness about me .