SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face please help , IE issue with background image size

    Hello guys i am new here, and need some help i writing a website but i noticed problem with my site when i open it in IE.
    the issue that i am having is my background image is not vied 100%. so what i mean is my background image is in high res not i made it so its in the center but also that i can see it all. but with IE it shows only half of the image and not the full thing.
    here is my script, please help

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
    div#container
    {
    background-image:url(mainPage.jpg);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
    background-attachment: fixed;
    }
    #text
    {
    position: absolute;
    left: 10%;
    right: 0%;
    top: 75%;
    bottom: 10%;
    font-size: 30pt;

    }

    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <BODY bgcolor="#999999">
    <div id="container">
    <table width="100%" hight="100%" align="center">

    <tr>
    <td id="text" align="center" >ENTER</td>


    </tr>
    </table></div>
    </body>
    </html>


    my background image res are 2,200px 1,323px
    i just want to see the intire image in small box in the middle.

    Thanks .

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The background-size property only works in IE9+ and all modern browsers, to overcome this read through the following article by Chris Coyier http://css-tricks.com/perfect-full-p...kground-image/.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help, but all it was is the IE 8 that i had, but when i downloaded IE 9 everything works perfect. thanks anyways


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •