Skip to content

Instantly share code, notes, and snippets.

@jstn

jstn/scaling_background.html

Created February 17, 2009 22:02
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jstn/66018 to your computer and use it in GitHub Desktop.
Save jstn/66018 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
scaling_background.html
<!--
scaling background, as seen on normative.com
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scaling Background</title>
<meta name="warning" content="HC SVNT DRACONES" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
<style type="text/css">
div#container { position: relative; z-index: 3; color: white; }
div#scale { position: absolute; top: 0; left: 0; z-index: 2; overflow: hidden; }
div#scale img { position: absolute; top: 0; left: 0; z-index: 1; }
</style>
</head>
<body>
<div id="container">
hello world
</div>
<div id="scale">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/NASA-Apollo8-Dec24-Earthrise.jpg" alt="this will be scaled" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript">
var brendan = function() {
var windowsize = window.getSize();
var img = $('scale').getElement('img');
var imgsize = img.getSize();
var over = imgsize.x / imgsize.y;
var under = imgsize.y / imgsize.x;
$('scale').setStyle('width',windowsize.x);
$('scale').setStyle('height',windowsize.y);
if((windowsize.x / windowsize.y) >= over) {
img.setStyle('width',windowsize.x);
img.setStyle('height',under*windowsize.x);
} else {
img.setStyle('width',over*windowsize.y);
img.setStyle('height',windowsize.y);
}
}
function refigure() {
brendan();
if(Browser.Engine.gecko) setTimeout(brendan,50);
}
window.addEvent('resize',refigure);
window.addEvent('load',refigure);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment