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.

Answer 2

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.

Answer 3

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;
}