I have a DIV where I need to place an arrow from a sprite image.

The arrow in the sprite image is 276x276px but I need to display it with half size.

```css
div {
  background-attachment: scroll;
  background-clip: border-box;
  background-image: url("https://www.designworkplan.com/content/3-read/8-free-vector-arrows/designworkplan_vector_arrow_collection-01.png");
  background-origin: padding-box;
  background-position: -55px -44px;
  background-size: auto;
  box-sizing: border-box;
  display: block;
  font-size: 11px;
  height: 276px;
  line-height: 15px;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 276px;
}
```

```html
<div></div>
```

How to do this?