I want to add a background color only to part of my div

Question

I have a java plugin that sets a menu on my left and then the resulting dynamic data on the right. When you click a menu item the corresponding data on the right scrolls to the top. The data on the right is a long list, when you click on a menu item you dont just see that one (single) result alone it just brings that one to the top of the page and the rest are below it.

So what I would like to do is set a color to the top part to draw attention that it's the result you asked for; the best thing for me would be to have it recognize what you clicked and set a background color but I don't know how to do that, or write java so if I could get any help would be nice.

The div is what moves, so I set a color to a top percentage of the page with the linear-gradient in CSS3 but it moves away when you click another menu item, since the div shifts up. I have a CSS3 animation but, because IE unfortunately still exists, I need something for browser-compatibility and for older browsers. The only things I've found are CSS3 gradients which I dont want: I do not need a gradient, I need a block of color without making another div because, like I said, the data is dynamic and it's not always the same thing in that div.

The gradient is nice, because I can set a percentage which is what im looking for but it has a fade, which I don't want, and if there is a solution that isn't CSS3 I would like that. Even if there's a way to do this in CSS3 please let me know as long as it's not going to do a gradient fade. Otherwise if anyone has any nifty ideas on how else to call attention to that one section I'm open to all ideas.

Answer 1

Gradients DO NOT necessarily have a fade, that is a misconception, let's say that you want your div to be 70% red (solid) starting from the top, your CSS will be.

background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%) 

Two Methods:

With Gradients:

div{         width:200px;     height:200px;     margin:50px auto;     border:4px solid rgb(50,50,50);     background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);     background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)   } 

Fiddle -> http://jsfiddle.net/QjqYt/

Without Gradients

div{     position:relative;     z-index:1;     width:200px;     height:200px;     margin:50px auto;     border:4px solid rgb(50,50,50);   }  div:before{     position:absolute;     z-index:-1;     top:0;     left:0;     width:100%;     height:70%;     content:"";     background-color:red; } 

Fiddle -> http://jsfiddle.net/6cKZL/1/