Skip navigation
Currently Being Moderated

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

Apr 25, 2013 4:16 PM

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

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points