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.

Brewage

I edited your question to make it more readable, but I left in the references to 'java', though I think you meant 'javascript' instead. – Papeete

Possible duplicate of CSS: Set a background color which is 50% of the width of the window – Tocci

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/

Rioux

I tried your code but not only does that have a fade even though its a small one but I also figured a similar thing and set the top 4% to be #ccc and the rest white. Problem is I discovered that it's the menu that is moving, the page jumps up and down to have the selected return at the top of the page but as you click on different menu items the page is jumping to wherever the return is. So if i set the top 4% to #ccc then once i click anything that isn't the top menu item i lose my background color since its moved up off the view of the page. Thanks though. – Brewage

I tried to do it in React but it doesn't work style={{ backgroundColor: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%); background-Image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%) }} – Chape

Answer 2

As an update to the accepted answer:

.only-start{
  background: linear-gradient(
    to right,
    red,
    red 1rem,
    transparent 1rem,
    transparent 100%
  );
}

Finial

Answer 3

Rodney - You can use Colorzilla to make your own custom gradient. You can make any kind of gradient with the online tool and it gives you the CSS code. It also has an option to make it IE compatible.

Note: If someone deems this 'comment-ish' - I can move it.

Mier

Answer 4

You can use gradient with color percentage.

#gradbox {
  height: 200px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, rgba(0,0,0,0) 20%, orange 20%); /* Standard syntax (must be last) */
}

<div id="gradbox"></div>

Phratry