Currently, I am working on a website that uses an image as the background for the entire site. Everything seems to be running smoothly in Firefox and Safari, but Internet Explorer is giving me some trouble. Sometimes the image fails to load at all, other times it loads partially, and sometimes there is a delay of a few seconds before it appears.
On top of that, the IE hack that I discovered doesn't seem to be as foolproof as it was claimed to be. Do you have any suggestions on how to create a complete background image for a website using only CSS?
I'm providing the stripped-down version of the HTML/CSS below; you can find the full example at
The HTML
<body>
<div id="header">
<div id="headerWrap" class="alignCenter">
<p>Topography</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
/* Resetting/normalizing default browser styles */
@import url('style/normalize.css');
/* Importing 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%; /*Ensures full background image visibility*/
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 browsers that do not support RGBa */
background: rgba(255, 255, 255, 0.75);/* RGBa with 0.6 opacity, alternative for modern 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;
}