메모장



배경 이미지 100% 방법 html/css



원본 사이트(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>


덧글

댓글 입력 영역