modify & design croped image - html

Question

I cropped an image in html & css . When i am coding a <span> tag the cropped image displayed. But I need to know how can I modify it.
I have the following code:
<style type="text/css">
.design {
padding-left:25px;
background:url('Flings.png') no-repeat top left;
display: inline-block;
height: 17px;
width: 0px;
margin-left: 550px;
}
</style>
<div style="height: 200px;">
<span class="design" style='font-size: 40px;'></span>
</div>
When I am using the span tag, the cropped image displayed. But I want to modify it.
Example:
<span class="desgin" style='color: red;'></span></h3>
I want to color the image itself and change it's size and I am little stuck here.
Hope you understood me well, I will be glad for any help.
Thanks!

Answer 1

So you want to scale and then colorise the image? You can scale the image using background-size but this isn't very well supported. CSS3 filters unfortunately don't have a colorize filter also.
You should do this using an <img> so scaling works without background-size and then use another transparent element on top of the image to provide the tint effect. Unfortunately <img> tags don't support pseudo-elements so need to use a wrapper.
jsFiddle
HTML
<div class="red-tint">
<img src="https://www.google.com.au/images/srpr/logo4w.png" />
</div>
CSS
img {
/* scale the image */
width:200px;
height:auto;
}
.red-tint {
position:relative;
display:inline-block;
}
.red-tint:after {
background: rgba(255, 0, 0, 0.5);
display:block;
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
}
Update
Ah you want to crop, then that's just a matter of using background-position. You will need to give negative left and top positions to background-position which represent the offsets from the top-left corner of the image. For example, this will draw a 200x100 chunk of the image which is 100px in from the left side of the image and 20 px down from the top.
jsFiddle
.design {
width:200px;
height:100px;
background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat;
background-position:-100px -20px;
}