Browser Support for background-size css property on body tag

Hello,

I'm using the below to stretch a background image all the way down to the bottom of my webpage, but the background-size seems to only do that for chrome and not IE and Firefox.  In IE and Firefox it only vertically spans a quarter of the page....any ideas?

body{
      background-image: url(images/bg_home.png);
      background-repeat: repeat-x;
      background-size: 100%;
}
cgray1223Asked:
Who is Participating?
 
numberkruncherConnect With a Mentor Commented:
Actually it is probably a good idea to include print media tag so that background is not printed!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Demo Page</title>
		<style type="text/css">
			html, body {
				margin: 0;
				padding: 0;
			}
			@media screen {
				img.bkgnd {
					position: fixed;
					top: 0; left: 0;
					width: 100%;
					height: 100%;
					z-index: -1000;
				}
			}
			@media print {
				img.bkgnd {
					display: none;
				}
			}
		</style>
	</head>
	<body>
		<img class="bkgnd" src="test.jpg" />
		<h1>Demo Page</h1>
		<div>
			Your stuff!
		</div>
	</body>
</html>

Open in new window

0
 
numberkruncherCommented:
It isn't supported in IE, but in FireFox I believe that you can do it with:
body{
      background-image: url(images/bg_home.png);
      background-repeat: repeat-x; 
      background-size: 100%;
      -moz-background-size: 100%;
}

Open in new window

0
 
cgray1223Author Commented:
thanks that worked in Firefox.  Anyone else have any IE ideas?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
numberkruncherCommented:
What about putting an IMG tag behind your main page DIV and have it stretched to full width and height with fixed position?

You would need to use z-order CSS attribute to achieve this.
0
 
numberkruncherCommented:
Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Demo Page</title>
		<style type="text/css">
			html, body {
				margin: 0;
				padding: 0;
			}
			img.bkgnd {
				position: fixed;
				top: 0; left: 0;
				width: 100%;
				height: 100%;
				z-index: -1000;
			}
		</style>
	</head>
	<body>
		<img class="bkgnd" src="test.jpg" />
		<h1>Demo Page</h1>
		<div>
			Your stuff!
		</div>
	</body>
</html>

Open in new window

0
 
cgray1223Author Commented:
Great idea numberkruncher!  It looks great on firefox and chrome but in IE it covers up the header and div text.  When I inspect the contents the text element is there....but it doesn't show in IE
<html>
	<head>
		<style type="text/css">
			html, body {
				margin: 0;
				padding: 0;
			}
			@media screen {
				img.bkgnd {
					position: fixed;
					top: 0; left: 0;
					width: 100%;
					height: 100%;
					z-index: -1000;
				}
			}
			@media print {
				img.bkgnd {
					display: none;
				}
			}
		
		</style>
	</head>
	<body>
		<img class="bkgnd" src="images/bg_home.png" />
		<h1>Demo Page</h1>
		<div>
			Your stuff!
		</div>
		
	</body>
</html>

Open in new window


0
 
numberkruncherCommented:
Which version of IE are you using because it seemed to work on my version?
0
 
numberkruncherCommented:
The only way that I can make that example fail is with "Quirks Mode" emulation in IE.
0
 
numberkruncherConnect With a Mentor Commented:
Did you include the <!DOCTYPE tag? that could be the difference between failure and working?
0
 
cgray1223Author Commented:
I wasn't including the doctype, that fixed it!  Thanks for all the help!!
0
 
numberkruncherCommented:
No problem, glad that I could help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.