Proportionately scaling of a background image fix for IE6 or at least IE7

[alisamii]

Hi:

I am having trouble implementing a background image using CSS for compatibility with IE7, and if possible, IE6.

In my CSS, I have the following code defined

body{
	margin:0px;
	height:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: black;
	background-color:#fff;
	background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: absolute;
	background-size: 100%;
}

/*
body{
	margin:0px;
	height:100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: black;
	background: #fff url(../images/bg.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
*/

The results work fine in Chrome, Safari and Firefox on both PC and Mac. However, the image does not scale and gets cropped in IE7.

I have tried it two different ways, both of which are in the code, and one of which is commented out. Neither way works properly with IE7.

Does anyone have a solution to this that they could share with me.

Thanks.

[deathbycheese]

A couple thoughts:

When you say "works properly", what does that mean?

I see in both scenarios you have height:100%. Have you tried including width:100%?

dbc

[alisamii]

Hi:

You can see the page at http://answersolutions.ch/

The page is designed as a simple "coming soon" page with absolutely no text. The only thing on the page is the background image.

[alisamii]

I have attached a screenshot of how it looks in IE7.

By works properly, I mean that the image scales proportionately so that it covers the whole available browser window, with top-left origin of 0,0 and scaling width-wise and height-wise to fit the screen.

[deathbycheese]

I see the issue now. For me, however, it's also happening in FF 3.6 (PC Vista).

Reviewing your css online, I notice you've indicated background:absolute, but haven't specified the absolute positions. I would try deleting this as well as background-size: 100% and replace them with width:100% and height:100% just to see what happens.


dbc







---------------------------------------------------------
If this was helpful, don't forget to click the 'thanks' button.

[alisamii]

Is that:

background-width: 100%;
background-height: 100%;

or

width: 100%;
height: 100%;

[deathbycheese]

Where you have height:100% at this time, just add width:100% like this:

width: 100%;
height: 100%;

Be sure to delete

background-position: absolute;
background-size: 100%;

for testing purposes.


dbc







--------------------------------------------------------
If this was helpful, don't forget to click the 'thanks' button.