Home/ Questions/Q 8378919
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T16:02:29+00:00

I’ve got an website in development which uses a image as background for the

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0