Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

full size background image.

Discussion in 'Website Coding & Programming Forum:' started by bigdave, Oct 1, 2013.

  1. bigdave

    bigdave Moderator Staff Member

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

    html {
    background: url( 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 -
  2. Stationery Direct

    Stationery Direct Administrator Staff Member

    Works in IE9 (tell him to upgrade :icon_wink:)
  3. bigdave

    bigdave Moderator Staff Member

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

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

    width: 100%;
    height: 100%;
    background: url( no-repeat center;

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

    Corrosive Moderator Staff Member

    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!
  5. bigdave

    bigdave Moderator Staff Member

  6. Corrosive

    Corrosive Moderator Staff Member

    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.
  7. bigdave

    bigdave Moderator Staff Member

    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. :(
    Corrosive likes this.
  8. RDB

    RDB Member

Share This Page