Results 1 to 2 of 2

Thread: div background image scrolling when it shouldn't

  1. #1
    Join Date
    Jun 2007
    Posts
    1

    div background image scrolling when it shouldn't

    Hi everyone!

    I'm new to this forum and a pretty new web designer. I have an issue that I can't seem to resolve. go to www.pearl-printing.com/repro.html in FF and IE6/7. See the difference? FF the text scrolls in front of the div's background image, however in IE the image scrolls up the div and disapears. My intent is for the image to behave like it does in FF. Anyone know what I'm missing to keep that image in place in IE?

    Here's my code (extraneous text removed to save some space)
    -------------------------------------------------------------------------

    <html>
    <head>
    <title>Pearl Printing - Services</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <META NAME="Description" CONTENT="Pearl Printing...">
    <META NAME="Keywords" CONTENT="...">
    <META NAME="Language" CONTENT="en">
    <META NAME="Robots" CONTENT="All">

    <script type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <link href="headers.css" rel="stylesheet" type="text/css">
    <link href="bodytext.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    a:link {
    color: #FFFFFF;
    }
    a:visited {
    color: #999999;
    }
    a:hover {
    color: #999999;
    }
    a:active {
    color: #333333;
    }
    .style1 {color: #FFFFFF}
    .style2 {font-size: 16px; font-weight: bold; background-position: center; text-align: center; font-family: Georgia, "Times New Roman", Times, serif;}
    .style3 {
    font-size: 14px;
    font-family: Georgia, "Times New Roman", Times, serif;
    }
    .style4 {font-size: 14px; }
    -->
    </style></head>
    <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/aboutus_o.jpg','images/client_o.jpg')">

    <!-- ImageReady Slices (MOCK8_U_flat.tif) -->
    <table width="901" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
    <td rowspan="5">
    <img src="images/mock8_o_01.gif" width="15" height="600" alt=""></td>
    <td rowspan="2">
    <img src="images/mock8_o_02.gif" width="124" height="200" alt=""></td>
    <td rowspan="2">
    <img src="images/mock8_o_03.jpg" width="115" height="200" alt=""></td>
    <td rowspan="2">

    <img src="images/mock8_o_04.jpg" width="113" height="200" alt=""></td>
    <td rowspan="5">
    <img src="images/mock8_o_05.gif" width="38" height="600" alt=""></td>
    <td colspan="3">
    <img src="images/mock8_o_06.jpg" width="450" height="128" alt=""></td>
    <td rowspan="5">
    <img src="images/mock8_o_07.gif" width="45" height="600" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="128" alt=""></td>

    </tr>
    <tr>

    <td colspan="3" rowspan="2" align="left" valign="top">
    <div class="style1" id="text" style="width: 436px; height: 357px; overflow:auto; padding-left: 10px; padding-right: 4px; background-image: url(images/txt_bkgrnd.jpg); background-repeat: no-repeat; background-position: top, left; background-attachment: scroll;">

    <h1 class="style2"> Giclee Reproduction Process: Step-by-Step</h1>

    <br>
    <br>
    <p class="bodytext style3"> CONSULTING PROCESS - STEP 1

    <br>
    <br>
    <img src="images/consultation.jpg" width="100" height="100" hspace="10" vspace="6" align="left">...<br><br>

    ...<br><br>



    SCANNING PROCESS - STEP2 <br><br>

    <img src="images/zbe.jpg" width="100" height="100" hspace="10" vspace="6" align="left">... <br><br>

    ...<br><br>



    PREPRESS PROCESS - STEP3 <br><br>

    <img src="images/prepress.jpg" width="100" height="100" hspace="10" vspace="6" align="left">...<br><br>



    PRINTING PROCESS - STEP4 <br><br>
    <img src="images/iris.jpg" width="100" height="100" hspace="10" vspace="6" align="left">...<br><br>

    ...<br><br>

    ...<br><br>

    ...</p>
    <p class="bodytext style3"><a href="services.html">&lt; back to services index</a></a> </p>
    </div> </td>

    <td>
    <img src="images/spacer.gif" width="1" height="72" alt=""></td>

    </tr>
    <tr>
    <td><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image23','','images/aboutus_o.jpg',1)"><img src="images/mock8_o_09.jpg" alt="learn more about pearl printing" name="Image23" width="124" height="285" border="0"></a></td>
    <td><a href="services.html"><img src="images/serv_o.jpg" width="115" height="285" border="0"></a></td>
    <td><a href="clients.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','images/client_o.jpg',1)"><img src="images/mock8_o_11.jpg" alt="click here to learn see a partial list of clients, and links to their websites." name="Image25" width="113" height="285" border="0"></a></td>
    <td>
    <img src="images/spacer.gif" width="1" height="285" alt=""></td>
    </tr>
    <tr>

    <td rowspan="2">
    <img src="images/mock8_o_12.gif" width="124" height="115" alt=""></td>
    <td rowspan="2">
    <img src="images/mock8_o_13.gif" width="115" height="115" alt=""></td>
    <td rowspan="2">
    <img src="images/mock8_o_14.gif" width="113" height="115" alt=""></td>
    <td>
    <a href="http://www.google.com/maps?f=q&hl=en&q=pearl+printing&sll=45.524833,-122.681301&sspn=0.003818,0.006952&ie=UTF8&z=17&iwloc=B&om=1" target="_blank"><img src="images/mock8_o_15.gif" alt="link to google map location" width="200" height="37" border="0"></a></td>
    <td>

    <a href="mailto:info@pearl-printing.com" target="_blank"><img src="images/mock8_o_16.gif" alt="click here to drop us an email" width="133" height="37" border="0"></a></td>
    <td>
    <img src="images/mock8_o_17.gif" width="117" height="37" alt="call 1 888 278 6826"></td>
    <td>
    <img src="images/spacer.gif" width="1" height="37" alt=""></td>
    </tr>
    <tr>
    <td colspan="3">
    <img src="images/mock8_o_18.gif" width="450" height="78" alt=""></td>

    <td>
    <img src="images/spacer.gif" width="1" height="78" alt=""></td>
    </tr>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    I found that your scrolling div just had a black background, no image, so I added my own background-image.

    This explains the general situation:-
    http://www.quirksmode.org/css/background.html

    Even so, I couldn't get IE7 to fix the background-image. background-attachment: fixed just made the image disappear because it was then related to the whole screen, not to div, as explained in the link above.

    The only way I could get IE7 to fix the background-image was to repeat the image and also fix it with this code:-

    <div class="style1" id="text" style="width: 436px;
    height: 357px; overflow: auto; padding-left: 10px; padding-right:
    4px; background-image: url(images/txt_bkgrnd.jpg);
    background-repeat: repeat; background-attachment:
    fixed;">
    <!--was background-repeat: no-repeat; background-position:
    top, left; background-attachment: scroll;-->

    Since I used my own image and it repeated but stayed fixed I'm not sure if it works with your image as I couldn't download txt_bkgrnd.jpg.

    Also the background-position: top, left; should be background-position: top left; without the , but this wasn't the problem as top left is the default so the error didn't matter.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. css background image alignment only works for IE
    By pokinski in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 06 Feb 2007, 09:24 AM
  2. Using opaque image as background
    By sumacbob in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 20 Apr 2006, 10:21 PM

Posting Permissions

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