New Topic/Question
Reply
Here is the code I coppied:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1;padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[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="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p style="font-size:30pt">This text appears in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
<p>This example is from the <a href="/html/codes/html_stretch_background_image.cfm">HTML Stretch Background</a> page.</p>
</div>
</body>
</html>
and here is my code:
<html>
<head>
<!--
Jim's Karaoke main page
Author: David Spencer
Date Built: 28 Sept. 2009
Dat of Last Update:
Filename: index.html
Supporting files: sand.wav, ComputerScreen.png, Hey.png, Cd%201.png, linkstyle.css, PalmTrees.jpg, JimsLogo.png
-->
<link href="linkstyle.css" rel="stylesheet" type="text/css" />
<embed src="sand.wav"
width=0 height=0 autostart=true repeat=true loop=true></embed>
<title>Jim's Karaoke</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1;padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[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>
<div id="page-background"><img src="PalmTrees.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h1 align="center"id="top">
<img src="JimsLogo.png" alt="Jim's Karaoke"width="90%"></h1>
<table width="100%" border="0">
<tr>
<td width="17%" valign="top" >
<ul style="list-style-image:url(Images/Cd%201.png)" id="link" >
<br /> <li><a href="aboutus.html" title="About Us">About Us</a></li>
<br /><li><a href="cdlist.html" title=" CD List/ Coming Soon">CD List/ Coming Soon</a></li>
<br /><li><a href="order.html" title="Order Form">Order Form</a> </li>
</ul>
</td>
<td width="83%">
<h1 style="text-align: center">
<img src="Hey.png"; align="middle" >
</h1>
<h1 align="center" style="font-family:'Comic Sans MS', cursive; font-size:14pt; font-weight:bold">
IF YOU LOVE TO SING, <br />
THEN THE BAREFOOT MAN AND I<br />
HAVE THE SONGS JUST FOR YOU !<br />
</h1>
<p align="center">
<img src="ComputerScreen.png" align="middle">
</p>
<p align="center" style="font-family:'Comic Sans MS', cursive; font-size:14pt">
Check out his list of songs in my Songs Page.
</p>
</td>
</tr>
</table>
</div>
</body>
</html>
Granted I've left out a few unimportant things but that is my code. Can anyone tell me what I'm doing wrong?
MultiQuote
| 