full size background image.

bigdave

Well-Known Member
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: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";


But still no joy. Can anyone offer a solution?


btw, the site is Assured Services Yorkshire -
 
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.
 
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. :(
 
Back
Top