Hi all
I am doing a website at the moment and want a background image to fill the browser window whatever size the window is. I have that working (see code) but it doesn't keep the aspect ratio.
Anyone got a better solution that keeps the aspect ratio of the image? I'm happy with any solution that is css, javascript or php.
Thanks in advance.
I am doing a website at the moment and want a background image to fill the browser window whatever size the window is. I have that working (see code) but it doesn't keep the aspect ratio.
Code:
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:20px 10px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
</head>
<body>
<div>
<img id="background" src="images/bkgd2.jpg" alt="" title="" />
</div>Anyone got a better solution that keeps the aspect ratio of the image? I'm happy with any solution that is css, javascript or php.
Thanks in advance.
