How do I fix the span to have img as background? [closed]_问答_开发者

How do I fix the span to have img as background? [closed]

开发者 https://www.devze.com 2023-01-28 07:43 出处：网络

相关专题：

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generall开发者_运维技巧y applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 9 years ago.

How do I fix the span to have img as background? [closed]

Now it was all fine when I set the picture as background background: url(http://simplisafe.com/files/images/icons/check_mark.png) and I got the desired output. BUT when the user sets the font-size to something else, the check mark picture remains the same size (the font size setting indirectly changes the size of the spans and divs too). Basically I want the picture scalable and in the background behind the number.

I already tried background-size, but it doesn't work.

<html>
<head><style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
   input { margin: 3px 0; vertical-align: middle; } 
   .box { border: 1px solid #aeaeae; padding: 3px; width: 6em; text-align: left; text-indent:.3em;    }
    .innerbox { width: 4em; text-align: left;}

#page-background {position: absolute; z-index:-1;}
#content {position: relative;}
</style>
</head>

<body>

<span class="box" id="1"><nobr>
 <span id="page-background"><img  src="http://simplisafe.com/files/images/icons/check_mark.png" />0&nbsp;
  <span class="innerbox" id="content">
     <DIV id="P_0" align="left" > 
     <input style="width:100%; border:1px solid #B4B4B4; font-size:12px" type="text" id="1" />
     </DIV>
   </span>
</span>                          
</nobr></span>
<body>
</html>

I added both #page-background and #content to make a checkmark img the background of the span but it just messes up my span. I tested the #page-background and #content on 2 overlapping spans and it works just fine, when I tried on add it to my existing code, the position: absolute messes up the span (see picture).

How can I fix this or is there another way to do this?

Your html is so wrong...

Since it seems you can't change the html (sic), you can use this.

EDIT: or this (using position: absolute) You'd better change your html anyway, b/c you must use padding in this case and I'm not sure that :

It'll be the same effect on every browser (tested on chrome)
Changing size (by some script you don't give... so we can't test) won't stretch it.

Anyway, if you can change it, it'll lighten things up like this

Or you could do it much simpler:

.box{
   display:inline-block;
   border:1px solid #aeaeae; 
   padding:9px 5px 9px 38px;
   background:url('http://simplisafe.com/files/images/icons/check_mark.png') no-repeat;
}

<div class="box">
    0 <input type="text"/>
</div>

http://jsfiddle.net/gpQ5f/