can I add background img to the *bottom* of a div?

seems like this should be easy, but I can't get it.

[Craig_F]

I have a small gradient (1px) that I need to add as a background image across the entire bottom of the div, can someone clue me in as to how to do this? I've tried about 10 different ways and it just won't work.

TIA!

[jo1ene]

What code are you trying?

[D_Blackwell]

Try this:
<div style="background: #ccc url(1px.jpg) no-repeat bottom;">
test
</div>

Shorthand for:
<div style=" background-color: #ccc; background-image: url(1px.jpg); background-repeat: no-repeat; background-position: bottom;">
test
</div>

Note: If you have a border on that <div>, and it's more than 1px or so, IE may obliterate your 1px background-image

<edit>expanded thought</edit>

[coopersita]

If I understand your problem correctly, the problem is that you are using no-repeat, which will result in your background showing only one little piece. Try:

<div style="background: #ccc url(1px.jpg) repeat-x bottom;">

[samuil]

If it is gradient with width of 1 px, and bigger height, use:

background-image: url(your-image);
background-repeat: repeat-x;
background-position: bottom;

[encyclo]

This works for me (the image I used is 5 x 15 pixels):

<div style="height:50px;border:1px solid red;background:#eee url(deg.jpg) repeat-x bottom left;">text</div>

[Craig_F]

thanks! I got it working using a much taller 1px image, but I'll try some of the suggestions here too since I'd rather use the smaller img.