1 Reply Latest reply on Apr 25, 2013 4:25 PM by Nancy OShea

    Can I apply a specific css function to only affect one area of my page?


      Okay... background. I am using a simple text fade with scroll. My CSS Scripting for it is this:


      #page_wrap {

          width: 440px;

          z-index: 1;

          margin: 10px auto;


      #bottom_fade {

          width: 440px;

          height: 200px;

          z-index: 99;

          position: fixed;

          bottom: 0px;

          background: url("images/bottom-fade.png") bottom center no-repeat;



      I have it written in the .body of the CSS, but I only want it to apply to one container area. I have my body laid out into 5 areas:








      Right now the background image "bottom-fade.png" is staticly attached to the bottom of my browser. I want it to be there, but as I scroll I want it to dissapear once I reach the bottom of the webpage otherwise it overlaps my pages border.


      This is what my fading scroll starts as:


      Shot 1.JPG


      This is how it ends:

      shot 2.JPG


      I want it to remain static just above the horizontal line below the text, or I want it to dissapear after my scrolling finishes.



      Is ther some sort of coding I can add, or something I can change to make that work? I'm completely at a loss