<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
body {background-image:url('red_gradient.gif')}
</style>
</head>
<body style="margin:25px">
<h1>Red Gradient Background Image</h1>
<h2>The image used for this background is 8-pixels tall, but 1500-pixels wide!</h2>
<div style="postion:relative; left:100px; top:250px; width:467px; height:100px; padding:25px 15px; margin-bottom:10px; border:4px dashed blue; background-image:url('blue_gradient.gif') "><h3>And how about this?</h3><p>This DIV uses a background image called "blue_gradient", which is just 8-pixels tall and 500px wide. This DIV is 467px wide (to accomodate internal padding, etc.)</p></div>
<div style="postion:relative; left:100px; top:250px; width:600px; height:100px; padding:25px 15px; border:4px dashed blue; background-image:url('blue_gradient.gif') "><h3>But OPPS!!</h3><p>This DIV uses same "blue_gradient" image, which is 8-pixels tall and 500px wide, but the DIV is now <strong>600px</strong> wide! So, you start to see the image repeated again at the far right....</p></div>
<img src="blue_gradient.gif" style="position:relative; top:25px; left:6px;" />
<p style="margin-top:10px; font-size:1.1em; font-weight:bold; margin-top:35px;">Above: Here is the actual image used for the blue_gradient.<br />
Notice how it is 'sized'. This is it's normal, non-tiling size.</p>
<p>By Joel A. Burdick. free to use</p>
</body>
</html>
Reply With Quote
Bookmarks