page wide background in IE not always loading

Question

I've got an website in development which uses a image as background for the complete website. Works fine in FF and Safari. But IE has some trouble with it. Sometimes it doesn't load the image at all, sometimes it's been loaded partially and sometimes it loads after a second or two.

Besides that, the IE proof hack that I found turns out to be not so IE proof at is was said to be. Any thoughts about how to use a image to be the complete background of a website in pure CSS?

I've stripped the html/css to the possible relevant parts; full example is on http://www.topografieindeklas.nl/home

The HTML

<body>
<div id="header">
    <div id="headerWrap" class="alignCenter">
        <p>Topografie</p>
    </div><!-- end headerWrap -->
</div><!-- end header -->

<div id="menu">
    <div id="menuWrap" class="alignCenter">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li
        </ul>
    </div><!-- end menuWrap -->
</div><!--- end menu -->

 <div id="page">
    <div class="pageBrandingWrap">
        <div class="pageBranding alignCenter">
            <h1>Title</h1>
        </div>
    </div><!-- End pageBrandingWrap -->

    <div class="entrytextWrap">
        <div class="entrytext alignCenter">
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </div>
    </div><!-- End entrytextWrap -->
</div><!-- end page -->

<div class="clear"></div>
    <div id="footer">
        <div id="footerWrap" class="alignCenter">

        </div><!-- end footerWrap -->
    </div>
</body>

</html>

The CSS

/* Correct/normalize default browser styles */
@import url('style/normalize.css');
/* Import the open sans font */
@import url(http://fonts.googleapis.com/css?     family=Open+Sans:300italic,400italic,600italic,400,300,700,800,600);

*{
margin:0px;
padding:0px;
}
html{
min-height: 100%;
background-size: cover;
background-image: url(style/img/masterBG.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment:fixed;
 }
body{
min-height:100%;/*Corrects the full image background*/
font-family:Arial, Helvetica, sans-serif;;
font-size:14px;
text-align: center;
}
#header, #branding, #menu, #page, #footer{
width:100%;
}
#header{
margin:20px 0 0 0;
background: rgb(255, 255, 255) transparent;/* Fallback for web browsers that doesn't support RGBa */
background: rgba(255, 255, 255, 0.75);/* RGBa with 0.6 opacity, for non-stupid browsers */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BFFFFFFF, endColorstr=#BFFFFFFF);/* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BFFFFFFF, endColorstr=#BFFFFFFF)";/* For IE 8*/
}
#headerWrap, #brandingWrap, #menuWrap{
width:900px;
font-family: 'Open Sans', sans-serif;
}

GitaarLAB · Accepted Answer · 2012-08-14T23:04:17.260

1

The problem you are experiencing with bigger pictures in IE is a time-out problem. Yet, while you are not the first to report a <10-second like time-out, msdn officially specifies at least 30 seconds:

Internet Explorer imposes a time-out limit for the server to return data. 
By default, the time-out limit is as follows:
Internet Explorer 4.0 and Internet Explorer 4.01     5 minutes  
Internet Explorer 5.x and Internet Explorer 6.x     60 minutes
Internet Explorer 7   and Internet Explorer 8       60 minutes

When the server is experiencing a problem, Internet Explorer does not 
wait endlessly for the server to return data.

Applications that use the WinINet API directly will experience the 
following ReceiveTimeout values:

WinINet.dll version  4.x              5 minutes
WinINet.dll versions 5.x and 6.x     60 minutes
WinINet.dll versions 7.x and 8.x     30 seconds

As pointed out on this msdn you als might want to check your registry:
HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings for a key called ReceiveTimeout, and delete if it is there. 'In the wild' it is quite often set by software like 'InstallAware' or 'WebUI Studio' to prevent 'their installers getting stuck otherwise'. But they don't reset it back.

In real life however it often turns out to be a server-side problem with bad/ancient settings for HTTP/1.1’s Keep-Alive behavior or Connection: close semantics for HTTPS connections.

One of the other solutions I sometimes see here on SO is to chop the image up in 2 or 4 smaller images. I don't want to paraphrase other peoples work ('stealing' half a website), so apparently I'm not allowed to point you to the answer-links. Use google and search for "lazy load" script here on SO.

Good luck!!

ps: in my personal experience I've seen IE often choke on (excessive) use of active css toy's like DXImageTransform

edited Aug 14 '12 at 23:04

answered Aug 14 '12 at 22:27

GitaarLAB

14,536
11
60
80

Thanks for the explanation! After searching some more, with your post in mind, I decided to step away from the pure css full image background solution and use a javascript solution instead. As you can see here: http://topografieindeklas.nl/home/ . The problem now is that IE won't listen to the Z-index. I know it's a huge thing in IE, but al the solutions presented on SO and other places don't give the right result. Any thoughts? – Dennis Hunink Aug 15 '12 at 10:30
You are talking about IE6&7's well-known z-index problem. [Here on SO](http://stackoverflow.com/questions/1156192/internet-explorer-z-index-bug) this [link](http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/) is considered to be the best accurate explanation! As for the question in your comment: I'd probably still try to use css, position a container top/left 0px, containing some positioned div's that contain the the parts of the chopped-off background and layer the rest of the page above it, still using z-index and relying on coding order in the html, sacrificing a SEO a bit – GitaarLAB Aug 15 '12 at 16:26
Hi GitaarLAB, just cause I used your comment and find them very usefully, I thought it would be a nice thing to get back to you once more. I did the BG trick, using Z-index, even working in IE. Thanks a lot! The result is on http://topografieindeklas.nl/home/ . I will be working some more on the timeout thing. Lazy load doesn't seem the appropriated solution since i might use tens of different images in the future. But you gave me some directions to head to! Thanks for that! – Dennis Hunink Aug 20 '12 at 08:33
Your welcome! I checked your site in FF12 and IE6. Looks great, happy to be of service! Don't forget to accept an answer eventually! Groetjes uit limboland! – GitaarLAB Aug 20 '12 at 11:45
Glad to hear it worked in IE6 as well! You even don't have the trouble with BG image not always loading, when clicking around? (that would be great!) – Dennis Hunink Aug 20 '12 at 12:34
Nope, no problems found while clicking around in IE6 (on w2k) – GitaarLAB Aug 20 '12 at 15:01

page wide background in IE not always loading

1 Answers1