1 Reply Latest reply: Apr 25, 2013 4:25 PM by Nancy O. RSS

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

    AxiomaticChaos

      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:

      .navigationleft

      .header

      .footer

      .contentright

      .contentleft

       

       

      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