원본 사이트(mootools사용)
http://www.pizzaza.ca/restaurant/bar_a_vin.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>배경100%</title>
<style type="text/css">
#background_container {
left:0;
position:absolute;
top:0;
}
#background {
left:0;
overflow:hidden;
position:fixed;
top:0;
}
* html #background {position:absolute;}
img { -ms-interpolation-mode: bicubic; }
</style>
<script type="text/javascript">
window.onload = function () {
resize_background_image_now();
}
window.onresize = function () {
resize_background_image_now();
}
function resize_background_image_now()
{
var bg = document.getElementById('background').getElementsByTagName('img')[0];
var ratio = 12/8;
bg.style.width = windowWidth()+'px';
bg.style.height = (windowWidth() / ratio)+'px';
if (parseInt(bg.style.height) < windowHeight()) {
bg.style.height = windowHeight()+'px';
bg.style.width = (windowHeight() * ratio) +'px';
}
}
function windowHeight () {
var de = document.documentElement;
return self.innerHeight ||
( de && de.clientHeight ) ||
document.body.clientHeight;
}
function windowWidth () {
var de = document.documentElement;
return self.innerWidth ||
( de && de.clientWidth ) ||
document.body.clientWidth;
}
</script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="http://www.pizzaza.ca/_java/fixed.js"></script>
<![endif]-->
</head>
<body style="margin:0; padding:0;">
<div id="background_container">
<div id="background"><!-- InstanceBeginEditable name="background" --><img src="http://www.pizzaza.ca/_images/bg_julie.jpg" width="1200" height="800" alt=" " /><!-- InstanceEndEditable --></div>
</div>
</body>
</html>
http://www.pizzaza.ca/restaurant/bar_a_vin.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>배경100%</title>
<style type="text/css">
#background_container {
left:0;
position:absolute;
top:0;
}
#background {
left:0;
overflow:hidden;
position:fixed;
top:0;
}
* html #background {position:absolute;}
img { -ms-interpolation-mode: bicubic; }
</style>
<script type="text/javascript">
window.onload = function () {
resize_background_image_now();
}
window.onresize = function () {
resize_background_image_now();
}
function resize_background_image_now()
{
var bg = document.getElementById('background').getElementsByTagName('img')[0];
var ratio = 12/8;
bg.style.width = windowWidth()+'px';
bg.style.height = (windowWidth() / ratio)+'px';
if (parseInt(bg.style.height) < windowHeight()) {
bg.style.height = windowHeight()+'px';
bg.style.width = (windowHeight() * ratio) +'px';
}
}
function windowHeight () {
var de = document.documentElement;
return self.innerHeight ||
( de && de.clientHeight ) ||
document.body.clientHeight;
}
function windowWidth () {
var de = document.documentElement;
return self.innerWidth ||
( de && de.clientWidth ) ||
document.body.clientWidth;
}
</script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="http://www.pizzaza.ca/_java/fixed.js"></script>
<![endif]-->
</head>
<body style="margin:0; padding:0;">
<div id="background_container">
<div id="background"><!-- InstanceBeginEditable name="background" --><img src="http://www.pizzaza.ca/_images/bg_julie.jpg" width="1200" height="800" alt=" " /><!-- InstanceEndEditable --></div>
</div>
</body>
</html>
태그 : html꽉찬배경
최근 덧글