CODEWITHSUNDEEP
cssinternet-explorergoogle-chrome
Freesnöw
Freesnöw

Reputation: 32133

CSS on IE vs CSS on Google Chrome

I just used the following technique:

http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

to try to get a background picture to be the exact size of the page no matter what I do, it works fine in Google Chrome but not it IE. The example that they provide works fine in IE and GC but I see no differences in the two sites. Here is my code:

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html>      <head>      <title>             National Balloon Festival!      </title>        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>       <style type="text/css">             html, body {
                height: 100%;
                margin: 0;
                padding: 0;             }           img#bg {
                position:fixed;
                top:0;
                left:0;
                width:100%;
                height:100%;            }           #content {
                position:relative;
                z-index:1;
                top:0px;
                left:0px;           }       </style>        <!--[if IE 6]>      <style type="text/css">             html { overflow-y: hidden; }            body { overflow-y: auto; }          img#bg { position:absolute; z-index:-1; }           #content { position:static; }       </style>        <![endif]-->    </head>     <body style=''>         <body>          <img src="images/Field1.jpg" alt="background image" id="bg" />          <div id="content">All your content here - including headers, paragraphs, etc.</div>         </body>





</body> </html>

Upvotes: 1

Views: 513

Answers (2)

Nathan Moraton
Nathan Moraton

Reputation: 58

Hmm, when i use your code (with a picture of my own) everything seems to be fine. I'm curious, what version of IE are you using?

Upvotes: 1

Freesn&#246;w
Freesn&#246;w

Reputation: 32133

Hmm... Apparently changing the positioning to "absolute" allowed it on top.

Upvotes: 0

Related Questions