background gradient with solid color

Question

I have to do the following: The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid.

{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;

Note: the first 225px, which the image fills, should be without the background-color

Dishrag

Answer 1

As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.

The CSS would be:

.imgbg {
   width:255px;
    height:355px;
   background:  url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
    background-position: 0px 0px, 0px 112px;
    background-repeat: no-repeat, no-repeat;
    background-size: 255px 112px, 255px 233px;
}

Here is your updated fiddle

Basic suport should be fine for browsers supporting multiple backgrounds, the only problem would be with IE <= 8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9). If it would be really a problem, see colozilla for a fix.

Nasty

Well, this is really something I am looking for, only 2 questions left: how crossbrowser is this? Secondly, how is this working in a dynamic height div? I ask this because, you used a background-size property. - I just removed that property, and it worked for me. – Dishrag

I have edited the answer to include crossbrowser info. About image size, I guess that not stating the size of the image shouldn't be a problem, and so with the gradient, but I am not really sure. – Nasty

@AnaMaria's answer below is the way to go, its how CSS is supposed to be used instead of this work around. – Superfuse

Answer 2

Check out this fiddle and tell me if this is what you want.

FIDDLE

HTML

<div class="imgbg"></div>

CSS

.imgbg {
   width:255px;
    height:355px;
   background:#f7d8e8  url('http://placehold.it/255x255') no-repeat;
}

Larsen

The image no longer works, but the concept is good – Superfuse

Answer 3

I would do the following:

#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }

This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.

Blanco

Well, heave you tried this? I am using chrome, and it puts the color everywhere, even under the image, where it is transparent. – Dishrag

Maybe I did not understand your question, but what's wrong in putting the color under the image? If it's a gradient to a color identical with the background. Check this site I made some time ago: http://mychinesephrases.com where I put the gradient on the body object. – Blanco

Check this out, with my image in fiddle. Now you can see that the pink color is under the image .imgbg { width:350px; height:300px; background:#f7d8e8 url('blue2.hu/danone/nogravity/img/right_column_bg_top.png') What I want is, that the pink color should be start only below the ending of the image. – Dishrag

Sorry, I've just started using fiddle, this is the link to my edit: jsfiddle.net/YPcVB/1 – Dishrag

OK, now I understood what your goal was :) Looks like you got your answer from AnaMaria above. I would had probably used nested DIVs for that. – Blanco