CSS background image problem

PsychomIKE · 19 Jun 2009 at 12:02

Hi, I'm having difficulties working out how to deal with a background image of a div.

I want a vertical gradient of 500px (top is white - bottom is grey) as a BG image of a DIV. The bottom of the image needs to be the bottom of the DIV when the DIV <500px (so top is light grey - bottom is grey) but then the DIV is > 500px the image stays at the top and the DIV has a BG colour of grey to match.

Does that make sense? :-s

gord · 19 Jun 2009 at 12:10

background: #CCCCCC url(imageurl) top repeat-x;

or you can split that into its components

background-color:
background-image:
background-position:
background-repeat:

PsychomIKE · 19 Jun 2009 at 12:41

HI, and thanks. The problem with that though is that background: top. I need to so that when the div is less than 500px tall it effectively has a background: bottom but I don't see how it's done.

Tripnologist · 19 Jun 2009 at 13:12

If the div becomes smaller than the background image itself, it will only show the image, not the background color. When it becomes larger, the background color matches the bottom of the image so as to appear the same. That's the best you're going to get without some js.

Dj_Jestar · 19 Jun 2009 at 13:32

background-image scaling is not widely supported, the best you'll get is described above.

gord · 19 Jun 2009 at 14:21

PsychomIKE said:
HI, and thanks. The problem with that though is that background: top. I need to so that when the div is less than 500px tall it effectively has a background: bottom but I don't see how it's done.

Ah sorry. Indeed, you'll need extra scripting to get that working as mentioned. I'd google for JS or AJAX div background display scripts or similar. But its doubtful there is anything out there.. quite a bespoke requirement.

Dj_Jestar · 19 Jun 2009 at 14:34

Don't bother, tbh.