stretching a background image in HTML
Out of context: Reply #12
- Started
- Last post
- 19 Responses
- utopian0
<!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>Scaled background-image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="Copyright (C) Mark Schenk, 2003-2006" />
<style type="text/css">
/* some changes made dd 1-12-2005, after discussion with Bill Brown
- removed absolute positioning on the content; makes demo more useful
+ added 1px top-border on body and positioned it -1px upwards, to prevent margin-collapsing
+ explicitly added z-index:0 to body for Mozilla
*//* styles for background-image */
html { height: 100%; overflow:hidden;}
body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; }
img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: white; }#content { font-family: Tahoma, Arial, sans-serif; font-size: 12px; margin-top: 30%; margin-left: 10%; padding: 10px; width: 40%; height: 20%; overflow: auto; background-image: url(images/transparent.png); }
h1 { color: maroon; font-size: 14px; }
</style>
</head>
<body id="www-markschenk-com">
<img id="background" src="images/Amelie_groot.jpg" alt="Background-image" />
<div id="content">
<h1>Scaling background image</h1>
<p>Always wanted to have a background image that scaled to your window size? Well, it is possible with some CSS trickery.</p>
<p>The background-image you see here is absolute-positioned to the body and it scales to the width and height of the page. This also means that the image is slightly distored when using a different screen ratio.</p>
<p>A problem with absolute positioning the image is, that if there is so much text that a vertical scrollbar is needed, the image will scroll with the canvas. This can easily be circumvented by using position:fixed on the image, but this doesn't work in IE6 but only in Opera.</p>
</div>
<!-- original experiment date: December 23, 2003 -->
</body>
</html>