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://i.stack.imgur.com/WMlaO.png "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
<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/
加载中,请稍侯......
精彩评论