#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Nobbies beach, Gold Coast. It's beautiful.
    Posts
    2,574
    Rep Power
    171

    Full screen bg image that fits different sizes


    Hi;

    I made this but in IE it doesn't work. By "doesnt work" I mean it scrolls and messes up all positionings.

    Can anyone please help?

    Thank you.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    191
    Rep Power
    44
    Add this to your head or stylesheet. The filter and ms-filter entries are the part that fix the "cover" method for IE.

    You won't need any divs specific to the background image anymore, since this applies directly to the <html> tag.

    Code:
    html{		
    	background: url(content_bg.png) no-repeat center center fixed; 
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='content_bg.png', sizingMethod='scale');
    	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='content_bg.png', sizingMethod='scale')";
    }
    Last edited by BlackAce; July 12th, 2013 at 11:50 AM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Location
    America (But which one?)
    Posts
    43
    Rep Power
    1
    Originally Posted by BlackAce
    Add this to your head or stylesheet.
    Stylesheet; otherwise you'll have to add it to your HTML for each and every page!

    I'm using a massive panorama for the background on my test site; it loads in no time on any modern internet connection, and it fills every resolution I've tried it on, including portrait mode on multiple mobiles.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    191
    Rep Power
    44
    Originally Posted by DoctorZeigler
    Stylesheet; otherwise you'll have to add it to your HTML for each and every page!
    Right. I responded with both options because he was not using a separate stylesheet on his site, and I didn't want him to think he had to create a stylesheet in order for this fix to work. Either approach resolves his issue.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    204
    Rep Power
    2
    You can use the backstretch.js library. Very easy to use jQuery extension. Works on all browsers.

    http://srobbin.com/jquery-plugins/backstretch/

IMN logo majestic logo threadwatch logo seochat tools logo