background image probelm in CSS

Hi Guys,

Again here to get help from guys on CSS.

I have a box (height not fixed) with two gradient effects (one from top and one from left). I have sliced two 1px images and fixed one in top div (repeat-x) and one for bottom div (repeat-y).

The problem is it only showing one background image.

How can I get the below code worked to display both background images.

Thanks

HTML
-------------------------------------------------
<div id="blog_sidebar_search_top">
<div id="blog_sidebar_search">
</div>
</div>

CSS
------------------------------------------
#blog_sidebar_search_top {
float:left;
width:298px;
height:auto;
background: url(../images/siderbar_bg_1.jpg) repeat-x top left;
}
#blog_sidebar_search {
float:left;
width:298px;
height:80px;
background: url(../images/siderbar_bg_2.jpg) repeat-y top left;
border-bottom:1px solid #ddd7d3;
}

 

JPGs do not do transparency... If you want the gradient to show through, you need to use .png images

 

The JPG image does not show transparent background so please save your image in png file because it is show transparent background