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
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments