• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

full size background image.


bigdave

Moderator
Staff member
#1
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 -
 

bigdave

Moderator
Staff member
#5

Corrosive

Well-Known Member
#6
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

Moderator
Staff member
#7
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. :(