Background doesn't stretch to fill page in IE8

I am using this code and it works fine in FF:

html { background: url(http://www.bigfreebet.com/images/site/backgroundimg.jpg) no-repeat center center fixed;}

It's for a full background image on my site.

Does anyone know how to fix it?

 

Perhaps the only way is just to enlarge the background image larger than 1300x385,
because IE8 doesn't support "background-size" CSS version 3 property.

Ref: http://www.quirksmode.org/css/background.html

 

The problem with that is the massive file size. Is there no way to do it at all?

 

True... if you are saving in high quality.

I think there is an option to reduce the JPEG quality so that you'll get the "optimum" size (< 100-150KB?): your visitor gets fast image download in a still acceptable quality. Even in FF and using that "background-size" CSS property, there is a loss in quality when you stretched your browser to full screen, isn't it?

There are a few tricks out there which let you have stretched background in IE, I forget where. But all require a change in HTML structure: the image file is no longer a CSS background-image, but is an HTML <img> element.

Hendra

 

At the moment it's a lot less than that at about 85kb. Thanks for the suggestions. I think I will override it with a background colour and in an Lte IE css file. Any idea how to stop the background image popping up for a second before the IE css file loads?

Thanks.

 

Did you mean delaying the background for a second like the following:

[COLOR="#0000FF"]<script type="text/javascript">
function onLoadDelayed(){
	document.getElementsByTagName("html")[0].style.backgroundImage = 
		"url('http://www.bigfreebet.com/images/site/backgroundimg.jpg')";
}
</script>[/COLOR]
</head>

<!--<body onLoad="checkCookie();">-->

<body [COLOR="#0000FF"]onload="setTimeout(onLoadDelayed,1000)"[/COLOR]>

Code (markup):

You have to chage style.css a bit though:

html {
[COLOR="#0000FF"]	/*background: url(http://www.bigfreebet.com/images/site/backgroundimg.jpg) no-repeat center center fixed;*/
[/COLOR]	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	[COLOR="#0000FF"]background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;[/COLOR]
}

Code (markup):

*changes are in blue.

 

Hey, thanks for the reply! That's kind of what I mean. I only want it delayed in IE though where I am using the bg colour over the top of it. Have you seen it on the site? In IE the bg annoyingly pops up for around a second before the IE css loads to place the bg colour over the top of it.

 

Any Ideas about this?

 

conditional stylesheet - take that property out of your main stylesheet and put in a second file... - load if NOT IE but if IE don't load it.