Hello..
I have a skin (on our development server, so it can't be seen from externally) in which the "Content_Area" div has two areas, a "left_side" and a "right_side" divs. Within the "right_side" div, I have another three divs; ContentPane, LeftContentPane and RightContentPage; see skin code below.
Within the skin.css file, I have the background for the "right_side" div as follows:
#right_side
{
border-top-style: ridge;
border-top-width: thin;
height: 585px;
background: #fffcee url('images/street.png'); /* no-repeat;*/
width: 800px;
float: right;
overflow-x: auto;
}
I added new html modules with filler text to the page in the three content areas; enough so the vertical scroll bar appears. If I view the site in any browser (opera, chrome, or firefox) except IE9, the background image stays "locked-in" while I scroll the content to the bottom of the page.
Yet, as expected, IE doesn't do the same. The vertical scroll scrolls the background image as well as the content text. I want the background image to stay "locked-in" while scrolling so it give the page a watermark look; no matter what browser is being used.
How would I tell only IE to keep the background image stable while scrolling? For now, as you can see above, I've turned off the no-repeat so at least there is a background image instead of just the background color when viewed in IE.
Thanks.. -Jeff
Skin code:
<div id="content_area">
<div id="left_side">
<div class="left_sidebar" id="LeftSideBar" runat="server" visible="false"></div>
</div>
<div id="right_side">
<div class="center_column" id="ContentPane" runat="server" visible="false"></div>
<div class="left_content" id="LeftContentPane" runat="server" visible="false"></div>
<div class="right_content" id="RightContentPane" runat="server" visible="false"></div>
<div style="clear: both;"></div>
</div>
</div>