Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Browser Support for background-size css property on body tag

Posted on 2010-11-25
11
Medium Priority
?
581 Views
Last Modified: 2012-05-10
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%;
}
0
Comment
Question by:cgray1223
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 3
11 Comments
 
LVL 13

Expert Comment

by:numberkruncher
ID: 34214315
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
 

Author Comment

by:cgray1223
ID: 34214351
thanks that worked in Firefox.  Anyone else have any IE ideas?
0
 
LVL 13

Expert Comment

by:numberkruncher
ID: 34214364
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 13

Expert Comment

by:numberkruncher
ID: 34214370
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
 
LVL 13

Accepted Solution

by:
numberkruncher earned 2000 total points
ID: 34214377
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
 

Author Comment

by:cgray1223
ID: 34214475
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
 
LVL 13

Expert Comment

by:numberkruncher
ID: 34214490
Which version of IE are you using because it seemed to work on my version?
0
 
LVL 13

Expert Comment

by:numberkruncher
ID: 34214500
The only way that I can make that example fail is with "Quirks Mode" emulation in IE.
0
 
LVL 13

Assisted Solution

by:numberkruncher
numberkruncher earned 2000 total points
ID: 34214503
Did you include the <!DOCTYPE tag? that could be the difference between failure and working?
0
 

Author Comment

by:cgray1223
ID: 34214515
I wasn't including the doctype, that fixed it!  Thanks for all the help!!
0
 
LVL 13

Expert Comment

by:numberkruncher
ID: 34214520
No problem, glad that I could help!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

661 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question