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
Contact Forum Editor

Send an email to our Forum Editor:


PLEASE NOTE: Your name is used only to let the Forum Editor know who sent the message. Both your name and email address will not be used for any other purpose.

Tech Helproom


It's free to register, to post a question or to start / join a discussion


 

Viewing size on different monitors


grada

Likes # 0

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.

Like this post
Ansolan

Likes # 0

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.

Like this post
Ansolan

Likes # 0

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">

Like this post
grada

Likes # 0

Thanks Ansolan

Like this post

Reply to this topic

This thread has been locked.



IDG UK Sites

Best Christmas 2014 UK tech deals, Boxing Day 2014 UK tech deals & January sales 2015 UK tech...

IDG UK Sites

LED vs Halogen: Why now could be the right time to invest in LED bulbs

IDG UK Sites

Christmas' best ads: See great festive spots studios have created to promote themselves and clients

IDG UK Sites

Why Apple shouldn't be blamed for exploitation in China and Indonesia