从左侧（而不是右侧）剪切图片的宽度

Question

I have a picture like this

Now, i want to implement something like a progress bar so this picture should start from a really short one and becomes longer and longer.

I am placing it as a background image in a div now. Right now if i set up a width (like 300), the right side arrow will be cut off. Is there anyway I can do that so only the left side will be cut instead of the right?

Thanks so much!

Answer 1

you need to specify the position of the background image in your css

HTML

<div class="progress-bar">
    <div class="progress-bar-image"></div>
</div>

CSS

.progress-bar {width:100%; height:40px}
.progress-bar-image { background: url('http://i.stack.imgur.com/yWm8U.png') top right no-repeat; width:100px; height:30px;}

See jsfiddle

Answer 2

Use css background-position:

.yourClassName
{ 
    background-image:url('your-image');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:right; 
}

and then size the element regularly.