6

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

marcias
  • 236
  • 4
  • 13

3 Answers3

5

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.

vals
  • 61,425
  • 11
  • 89
  • 138
  • 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. – marcias Jul 29 '13 at 17:58
  • 1
    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. – vals Jul 29 '13 at 21:21
  • @AnaMaria's answer below is the way to go, its how CSS is supposed to be used instead of this work around. – run_the_race Oct 28 '22 at 09:24
1

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;
}
AnaMaria
  • 3,520
  • 3
  • 19
  • 36
0

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.

Marian Boricean
  • 110
  • 1
  • 11
  • Well, heave you tried this? I am using chrome, and it puts the color everywhere, even under the image, where it is transparent. – marcias Jul 29 '13 at 12:55
  • 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](http://mychinesephrases.com) where I put the gradient on the `body` object. – Marian Boricean Jul 29 '13 at 13:32
  • 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. – marcias Jul 29 '13 at 16:21
  • Sorry, I've just started using fiddle, this is the link to my edit: http://jsfiddle.net/YPcVB/1/ – marcias Jul 29 '13 at 16:27
  • 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. – Marian Boricean Jul 31 '13 at 12:56