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

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.