June 30th, 2013, 06:52 PM
Full screen bg image that fits different sizes
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?
July 12th, 2013, 11:45 AM
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.
background: url(content_bg.png) no-repeat center center fixed;
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.
July 24th, 2013, 03:16 PM
Stylesheet; otherwise you'll have to add it to your HTML for each and every page!
Originally Posted by BlackAce
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.
July 24th, 2013, 05:25 PM
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.
Originally Posted by DoctorZeigler
August 1st, 2013, 04:24 AM