keep div background image on top

Question

I needed to create my own dropdownlist so that I can create a server control with other properties. For the most part, this is going well but I have come across one problem. For the drop down arrow, I just use a background image in CSS. The problem, though, is that any text that extends past the image will overlay that image. anyone have any ideas on how to either keep the background image on top or hide any text that goes beyond where the image is? Here is my code, so far:

.tbSearchDefault
    {
    border-top:1px solid #abadb3;
    border-right:1px solid #dbdfe6;        
    border-bottom:1px solid #e3e9ef;
    border-left:1px solid #e2e3ea;
    background-image:url('images/ddlMouseOut.gif');
    background-repeat:no-repeat;       
    background-position:right;   
    cursor:default;
    }

<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <td>
      <asp:TextBox ID="tbSearchName" runat="server"                     
                CssClass="tbSearchDefault" >
     </asp:TextBox>                      
   </td>
 </tr>

Have you tried using `z-index`? https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index — Joshua Pack, Apr 22 '13 at 14:36
Alternatively you can give same amount of padding right to your textbox as background image width is — Morpheus, Apr 22 '13 at 14:44
Can you create a simplified [jsFiddle](http://jsfiddle.net)? — Adrift, Apr 22 '13 at 14:47
Where would I set the z-index at? I don't believe that background-image supports a z-index — jason, Apr 22 '13 at 14:56

Joshua Pack · Answer 1 · 2013-04-22T17:22:30.013

0

It's hard to say exactly what you need, however I believe you are looking for the z-index css

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index

This will allow you to setup what stacks first and so on.

.tbSearchDefault
{
    z-index: 99; // Sets this class to be over any other element unless z -index is higher.
}

edited Apr 22 '13 at 17:22

answered Apr 22 '13 at 14:39

Joshua Pack

910
1
9
21

i thought of using z-index but how do you set a z-index for a background-image in a textbox? – jason Apr 22 '13 at 14:47
You set the class to be a high z-index, I suppose I would have to see an example of what you are trying to do to give you a more exact solution. – Joshua Pack Apr 22 '13 at 17:24
I think maybe you want something like this: http://stackoverflow.com/questions/611482/change-color-and-appearance-of-drop-down-arrow – Joshua Pack Apr 22 '13 at 17:36

score 0 · Accepted Answer · answered Apr 23 '13 at 15:16

0

Well, there seemed to be no way to do this. I guess a background image is, in fact, a background. What I ended up doing was to just add a div next to the textbox and add the image there.

answered Apr 23 '13 at 15:16

jason

3,821
10
63
120

keep div background image on top

2 Answers2