I just started the process of learning CSS web design so I’m fairly certain my code is a little messy but I was hoping someone might be able to help me out.

I am working on a website with a large background image. It works just fine in google chrome, firefox and IE8, but IE7 the background image shows up when you first open the page but disappears if you click away from the homepage and return.

Is this a bug in ie7? Does anyone know of a quick fix? I would hate to have to redesign the whole site.

Also, my logo at the top of my page’s location changes when I open it on a blackberry. Is there anything in my coding that can be fixed to prevent this?

Thanks!
Drew

CSS:

@font-face {font-family: "museosans_500"; src: url(css/fonts/museosans_500.otf) format("opentype");
}

body {
    font-family: "museosans_500", Arial, Helvetica, sans-serif;
    font-size:small;
    color:#000;
    background-color:#000;
    margin: 0;
    padding: 0;
    background-image:url(images/bg.jpg);
}

#container {
    width:800px;
    height: 500px;
    margin:0 auto;
    background-position:50px -30px;
    background-repeat:no-repeat;
    font-family: "museosans_500", "lucida grande", Helvetica, arial, sans-serif;
    }

#logo {
    width:299px;
    height:80px;
    background-image:url(images/logo.png);
    margin-top:35px;
    margin-left:10px;
    position: absolute
}

HTML

<body> 

<div id="container"> 
            <a href="index.html"><div id="logo" title="."></div></a> 
                          <div id="menu"> 
                                <a href="index.html">home</a>  
                                <a href="about.html">about</a>  
                                <a href="menu.html">menu </a>  
                                <a href="reservations.html">reservations</a>  
                                <a href="location.html">location</a> 
                          </div> 

                        <div id="content"><img src="images/tomato.jpg" </div> 
                    </div> 



    </div>
</body> 
 </html>

do you have a live version of this or something I dont see anything terribly wrong with the code especially regarding the body background image. I might suggest just putting the image in a div with an img tag and then preloading it in the css so id have like
<container>
<img />
<header></header>
<content></content>
<footer></footer>
<div id="preload">
</div>

#preload{background: url(img);display:none;}

hi,

this is not a problem, it a bug for IE7
please replace the code, and try.

body {

   font-family: "museosans_500", Arial, Helvetica, sans-serif;
   font-size:small;
   color:#000;
   background-color:#000;
   margin: 0;
   padding: 0;
   background:url(images/bg.jpg);
}

Hope its ok now.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.