Cut the width of a picture from left, instead of right

Question

I have a picture like this enter image description here

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!

Try this answer: http://stackoverflow.com/questions/7729652/how-to-position-background-image-in-bottom-right-corner-css — EGHDK, Mar 22 '13 at 20:55

bretterer · Accepted Answer · 2013-03-22T21:00:40.960

7

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('https://i.stack.imgur.com/yWm8U.png') top right no-repeat; width:100px; height:30px;}

See jsfiddle

edited Mar 22 '13 at 21:00

answered Mar 22 '13 at 20:55

bretterer

5,693
5
32
53

score 2 · Answer 2 · answered Mar 22 '13 at 20:55

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.

answered Mar 22 '13 at 20:55

Kris

40,604
9
72
101

Cut the width of a picture from left, instead of right

2 Answers2