Viewing size on different monitors

  grada 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 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 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 15 Dec 09

Thanks Ansolan

Advertisement

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

Should I upgrade to Windows 10? 8 reasons why you should upgrade to Windows 10... and 2 why you…

We are being sold the ability to spend money we don't have. And we love it

IKinema aims to banish droopy shoulders and wonky spines in animated CG characters

How to use Apple Music in the UK: Complete guide to Apple Music's features

We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message