I have been trying all day to figure out how to get a background image to stretch the full screen and stay fixed in the browser screen. I have no problems doing this in FireFox but Internet Explorer doesn't seem to like my code. I looked all over the net and found a few example that worked in Internet Explorer, however when I copied the code and changed the image source all of the sudden it does not work. I can't figure out what I'm doing wrong and my client needs this page done by Sunday.
Here is the code I coppied:
CODE
<!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:
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?
Forum Index:
Programming Help |
C and C++ |
VB6 |
Java |
VB.NET |
C# |
ASP.NET |
PHP |
ColdFusion |
Perl and Python |
Ruby |
Databases |
Other Languages |
Game Programming |
Mobile Development |
Software Development |
Computer Science |
Industry News |
Programming Tutorials |
C++ Tutorials |
Visual Basic Tutorials |
Java Tutorials |
VB.NET Tutorials |
C# Tutorials |
Linux Tutorials |
PHP Tutorials |
ColdFusion Tutorials |
Windows Tutorials |
HTML/JavaScript Tutorials |
CSS Tutorials |
Flash Tutorials |
Web Promotion Tutorials |
Graphic Design & Photoshop Tutorials |
Software Development Tutorials |
Database Tutorials |
Other Language Tutorials |
ASP.NET Tutorials |
Game Programming Tutorials |
WPF & Silverlight Tutorials |
| 
