11 Replies - 33396 Views - Last Post: 17 December 2012 - 10:13 AM

#1 spence101878  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 01-October 09

How do I make a background image stretch and stay fixed in IE?

Posted 01 October 2009 - 10:02 PM

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:
<!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?

Is This A Good Question/Topic? 0
  • +

Replies To: How do I make a background image stretch and stay fixed in IE?

#2 NubileDIYer  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: How do I make a background image stretch and stay fixed in IE?

Posted 15 October 2009 - 01:36 PM

It seems you and I are having the same problem.. Get your help from About.com? Yeah, me too. Works in FF and Safari, but my client viewed in Internet Exploder and sees the background on top, followed by content (coincidentally, as it appears in Dreamweaver). The good news is IE is slowly losing popularity....

One place where our code differs: You have the background image in a div, whereas I have it first thing after the body:
<body><img src="images/woodfloor.jpg" alt="background image" id="bg" />
	<div id="wrapper">

And I have all the styles in CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
<![endif]



Is that conditional comment correctly coded (a mouthful!)

But anyway, my site is temporarily hosted at Webs.com, a great FREE hosting site that comes in handy whilst in development. Can a couple n00bs get some pro-love?
Was This Post Helpful? 0
  • +
  • -

#3 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: How do I make a background image stretch and stay fixed in IE?

Posted 15 October 2009 - 02:41 PM

a link to the problem page would enable us to help you easier :)

tommyflint
Was This Post Helpful? 0
  • +
  • -

#4 NubileDIYer  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: How do I make a background image stretch and stay fixed in IE?

Posted 15 October 2009 - 07:59 PM

View Posttommyflint, on 15 Oct, 2009 - 01:41 PM, said:

a link to the problem page would enable us to help you easier :)

tommyflint

Sorry I inexplicably hid the link in my post. Brian Molnar
Was This Post Helpful? 0
  • +
  • -

#5 spence101878  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 01-October 09

Re: How do I make a background image stretch and stay fixed in IE?

Posted 15 October 2009 - 08:20 PM

I'd give you a link but it is not uploaded yet so since we both the same problem I'll watch and see
Was This Post Helpful? 0
  • +
  • -

#6 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: How do I make a background image stretch and stay fixed in IE?

Posted 15 October 2009 - 11:19 PM

What version of IE is this in because i have tested IE 7 and 8

Tommyflint
Was This Post Helpful? 0
  • +
  • -

#7 spence101878  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 01-October 09

Re: How do I make a background image stretch and stay fixed in IE?

Posted 16 October 2009 - 05:41 AM

I've been having problems in 7
Was This Post Helpful? 0
  • +
  • -

#8 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: How do I make a background image stretch and stay fixed in IE?

Posted 16 October 2009 - 05:45 AM

Your link seems to be working fine for me. IE7, Vista64.
Was This Post Helpful? 0
  • +
  • -

#9 NubileDIYer  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: How do I make a background image stretch and stay fixed in IE?

Posted 30 October 2009 - 08:01 PM

My client is having the problem with IE 6, and I checked on my ancient PC and have the same problem, same browser. The background image stretches, but pushes the content below it, so it appears on a plain white background. What's worse, is my image sprite menu I worked so hard on doesn't work (not even the links!) so this is a bigger problem than I perceived. I'll post the relevant code, I have a feeling that conditional IE6 code is stuffed up.. If you want to see it you can find it here
HTML:
<body><img src="images/woodfloor.jpg" alt="background image" id="bg" />
	<div id="wrapper">
		<div id="menu">
		  <ul id="nav">  
			   <li id="home"><a href="index.html">
			 		<span class="button">Home</span>
					<span class="text1">The New Home of Brian Molnar</span></a></li> 
					 
			   <li id="news"><a href="news.html">
			 		<span class="button">News</span>
					<span class="text2">Press, Blog, All the News that Fits!</span></a></li>
					
			 <li id="music"><a href="music.html">
			 		<span class="button">Music</span>
					<span class="text2">Listen, Discography, Lyrics</span></a></li> 
					 
			   <li id="tour"><a href="tour.html">
			 		<span class="button">Tour</span>
					<span class="text2">View our tour calendar</span></a></li> 
					 
 			 <li id="links"><a href="gallery.html">
			 		<span class="button">Gallery</span>
					<span class="text2">Your favorite videos and photos!</span></a></li>
					
 			 <li id="contact"><a href="contact.html">
			 		<span class="button">Contact</span>
					<span class="text3">Find us, contact us, book us!</span></a></li>  
 		 </ul>  
			
		</div>
		



CSS:
/* CSS Document */
* {
	margin: 0px;
	padding: 0px;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
	padding-top: 0px;
	color: #FFF;
	font-family: Palatino Linotype, Book Antiqua3, Palatino6, serif;
	text-align: left;
	letter-spacing: 1px;
}

/*Background Image Stretch*/
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
<![endif]

It's that last snippet, isn't it?
Was This Post Helpful? 0
  • +
  • -

#10 NubileDIYer  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: How do I make a background image stretch and stay fixed in IE?

Posted 30 October 2009 - 08:33 PM

Sorry for the constant updating, but in re-reading the tutorial I used for help, I think I did mess up the conditional snippet. I guess I stuck it in the wrong place. But it didn't fix the problem..

Updated HMTL:
<link href="home.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>


CSS:
/*Background Image Stretch*/
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}


Is this fixable, or do you aces suggest another approach?
Was This Post Helpful? 0
  • +
  • -

#11 MarshallR  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 16-December 12

Re: How do I make a background image stretch and stay fixed in IE?

Posted 16 December 2012 - 12:21 PM

View PostNubileDIYer, on 30 October 2009 - 08:33 PM, said:

Sorry for the constant updating, but in re-reading the tutorial I used for help, I think I did mess up the conditional snippet. I guess I stuck it in the wrong place. But it didn't fix the problem..

Updated HMTL:
<link href="home.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>


CSS:
/*Background Image Stretch*/
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}


Is this fixable, or do you aces suggest another approach?



Problem with the code is "Position: Fixed" makes it stretch the whole width, but doesn't float your content above the image, while "Position: Absolute" does what many people want all content within the Image is Left Aligned.


I found only way i could fix Absolute to center is do Top:50% left:50% right:50% bottom:50%; Do you have any other suggestions cause this does not seem right.
Was This Post Helpful? 0
  • +
  • -

#12 j4v3d  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 52
  • Joined: 24-November 12

Re: How do I make a background image stretch and stay fixed in IE?

Posted 17 December 2012 - 10:13 AM

Will this help you out?

I use this for full scale backgrounds in ALL browsers its a jQuery plugin quite simple to use and so far i have not come across any problems in any browsers, it works on different screen sizes as well. It's worth having a look and if someone else is having the same problem they can have a look at it as well.

Hope it helps.

jQuery Backstretch
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1