I found an interesting page on scaling backgrounds from Web Designer Wall (GOTOCHINA) and picked apart the code if anyone wants a starting point for creating something like this. Just keep in mind the image generally loses a lot of quality as it scales.
CSS
*{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;background:url(loading.gif);color:#000}
img{display:block}
#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#bg td{vertical-align:middle;text-align:center}
#bg img{min-height:50%;min-width:50%;margin:0 auto}
#cont{position:absolute;top:0;left:0;z-index:70;overflow:auto}
#top{color:#FF9966;height:56px;background-color:#000000;opacity:.5;}
#mid{width:513px;height:474px;margin-left:auto;margin-right:auto;margin-top:25px;}
HTML (Removed Brackets from each line><)
body
div id="cont"
div id="top"
/div
div id="mid"
/div
/div
/div
div id="bg"
div
table cellpadding="0" cellspacing="0"
tr
td
img alt="" src="bg.jpg" /
/td
/tr
/table
/div
/div
/body
1 comment:
thanks chad. i actually feel like i might be able to do this... which means you rule.
Post a Comment