tags:

views:

197

answers:

2

i have html page

   <body>
 <div class="hide1" style="width:1000px; height:1000px;">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td colspan="2" align="center">Heading</td>
</tr>
<tr>
  <td width="51%">Left1</td>
  <td width="49%">right 1 </td>
</tr>

<tr>
  <td>Left 2 </td>
  <td>right 2 </td>
</tr>
 </table>
</div>
</body>

the class hide1 is

  <style>
  .hide1 {
background: url(back.png) no-repeat;
}
  </style>

and JQUERY function is

<script>
 $(document).ready(function(){
 $("div.mover").click(function () {
 $("div.hide1").fadeTo("slow", 0.33);
 });
 });
</script>

my problem is all the page fade... what i need is: only fade the background image of DIV

how i can do this..?

Thanks

A: 

What about adding one more div with just the background image and fading just that one?

Something like:

<div class="wrapper">
  <div class="image">
    //FADE THIS
  </div>
  <div class="content">
    // DON'T FADE THIS
  </div>
</div>

You can use absolute positioning for the inner divs.

Roberto Aloi
work perfectly...
air
A: 

You can't apply CSS opacity only to an element's background image.

You'd have to have two elements, one containing the background image (which you can fade) and another containing the non-fading content. You then position them on top of each other using CSS Positioning.

This can become tricky when the content element's height isn't known in advance as you need to make the background element the same height; you may need a combination of absolute positioning and script backup for IE6 in that case.

bobince