full size background image.

[bigdave]

I want to add a full size background image to a site. Ive used the following CSS3:

CSS
html {
background: url(http://jenserve.com/assuredservices/wp-content/uploads/2013/10/enginea1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

that's worked great but doesn't display in the customers browser (IE (7 or 8 I think)).

CSS Tricks suggested adding the following...
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progidXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

But still no joy. Can anyone offer a solution?


btw, the site is Assured Services Yorkshire -

 

[Stationery Direct]

Works in IE9 (tell him to upgrade :icon_wink

 

[bigdave]

I have suggested it but they're not having it lol.

I'm thinking maybe going for idiot browser proof css..

CSS
html{
width: 100%;
height: 100%;
background: url(http://jenserve.com/assuredservices/...0/enginea1.jpg) no-repeat center;
}

I know it'll not scale proportionately but tbh I'm not really sure what else to do.

 

[Corrosive]

There are a few 'hacks' for this but none of them very satisfactory I'm afraid. The most I think you could do is deliver a different (larger?) background image for browsers that don't have background size support using modernizr Modernizr: the feature detection library for HTML5/CSS3 and balance it for coverage vs download speed ... And tell them to upgrade!

 

[bigdave]

could <--[if IE]> tags work to load the image onto the background? so....

html {
background: url(http://jenserve.com/assuredservices/wp-content/uploads/2013/10/enginea1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

<!--[if IE7]>
}
html{
width: 75%;
height: 75%;
background: url(http://jenserve.com/assuredservices/wp-content/uploads/2013/10/enginea1.jpg) no-repeat center;
}
<![endif]-->

 

[Corrosive]

Yes, that could work. Mordernizr is cool though and worth getting to grips with for graceful degradation of sites in older browsers. It basically detects if a feature is available in the visitor's browser and then allows you to use a pre-defined class to make your compound selectors target the offending browser. Conditional comments are OK but they only target IE. Older versions of Chrome, FF, Opera etc. also lack CSS3 and HTML5 support.

 

[bigdave]

I'm deffo gunna have a look through Modernizr's tutorials and get a handle on it but in this instance its a wp template that I'm editing and my boss is getting on my case about getting the site finished quickly.

 

[RDB]

This seems a useful tutorial: Perfect Full Page Background Image | CSS-Tricks