PDA

View Full Version : div background image scrolling when it shouldn't


PaulThomas
13 Jun 2007, 03:45 PM
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>
Wickham
14 Jun 2007, 04:14 AM
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.