Viewing size on different monitors

  grada 11:40 AM 14 Dec 09

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 PM 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">
<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;}
<!--[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;}
<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>

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 PM 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://">

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

Thanks Ansolan


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

Sony Vaio Z Canvas release date, price and specs: Another Surface Pro rival but for the US

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

Adobe unveils Sketch-rival Project Comet for UX design

How to fix iOS 9 problem iPhone stuck screen, unresponsive, no swipe, frozen, can't turn off