//some 3rd party need geo

Viewing size on different monitors

  grada 11:40 14 Dec 09
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 09

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 09

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 09

Thanks Ansolan

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

What is Google Allo? What is Google Duo? Google Allo UK release date rumours and features: Google…

1995-2015: How technology has changed the world in 20 years

These clever designs help visualise a complex intelligence tool

iOS 10 troubleshooting tips: Simple fixes for the most common iOS 10 problems, from network…