Viewing size on different monitors

  grada 11:40 14 Dec 2009
Locked

Can any one tell me how to design a web page and insert a photo into a web page that will then fill (100%) the whole screen on any size of monitor at any resolution. I am using Front Page 2002 or 2003. Thank you in advance for any help that you can offer.

  Ansolan 20:25 14 Dec 2009

To fit with the type of site you are likely to be producing, something like this should be okay:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "click here">
<html>
<head>
<title>A Stretched Image</title>
<meta name="description" content="Whatever you wish">
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="click here" width="100%" height="100%" alt="your description" title=""></div>
<div id="content">
<h2>An Interesting Header</h2>
<p>Make sure you use a high quality, good size, well optimised image which is suitable for stretching. Big shapes rather than fine detail will be best.</p>
<p>Hope this works out.</p>
</div>
</body>
</html>

Should be fine for Chrome Firefox etc. There's a conditional there for IE6 and works in IE7. Haven't tried IE8, probably okay but if not there may be a work round, or you could add:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

In the head section.

  Ansolan 20:30 14 Dec 2009

The forum has changed the last part of the doctype into a link. Should be (with the xs corrected)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "hxxp://wxx.w3.org/TR/html4/loose.dtd">

If you happen to use the final tag mentioned, in your case this would be:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

  grada 00:14 15 Dec 2009

Thanks Ansolan

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Acer Predator 21X review

Best Free Video Tutorials for Drawing and Painting

Best podcast apps for iPhone & iPad

Nokia 8 : design, caractéristiques techniques, date de sortie