Forums

janetb

I'm trying to go through examples out there and get a handle on stretching background images with an opacity text box overlaying the image. I have it working in IE7, IE6, and Firefox 2.0.0.16 with one weird little thing. In Firefox only, if I have the page designated as the home page or I hit refresh, the background image doesn't appear - just a completely white page. If I have it as a link or highlight the url itself and hit enter, the background appears. Any ideas?

It's pretty hideous - it's a test, but here's the url:
http://www.mahec.net/default3.aspx


<%@ Page Language=\"VB\" %>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<script runat=\"server\">
</script>
<html xmlns=\"http://www.w3.org/1999/xhtml\" >
<head runat=\"server\">
<title>Untitled Page</title>
<style type=\"text/css\">
html, body { height: 100%; margin: 0; padding: 0; color: #fff;}
a { color: #fff; }
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
    position:relative;
    width:90%;
    padding:25px 25px 25px 25px; 
    z-index:1;
    background-color:#ffffff;
    color:#000000;
    opacity:0.6;
    filter: alpha(opacity=60);
    }
</style>
<!--[if IE 6]>
<style type=\"text/css\">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
    <form id=\"form1\" runat=\"server\">
    <div>
    <img src=\"http://flounder2.mahec.net/images/rhodo.jpg\" alt=\"my 2 cats\" id=\"bg\" />
<div id=\"content\">
<h1>Faking a Stretched Background Image</h1>
<h2>Across the Whole Page</h2>
<p><a href=\"/od/css3/f/blfaqbgsize.htm\">Learn how to stretch a background image.</a></p>
<p>paragraph text</p>
    </div>
    </form>
</body>
</html>

janetb

I'm not quite sure why this made a difference, but I cleared Firefox history and cache and now it comes up fine no matter what. ?????

jb

daGUY

"janetb" said:
I'm not quite sure why this made a difference, but I cleared Firefox history and cache and now it comes up fine no matter what. ?????

jb

Could be you had an old version of the page without the image that was cached, and FF was reading the cached version when you went straight to the page, but calling up a fresh version when you navigated to it from a link. Probably something like that.

treehouse : what would you like to learn today?

Forums

Background stretch with text in Firefox