Resize background image sprite component using CSS

Question

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.

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;
}

<div></div>

How to do this?

Well, I'd think the first thing to try is setting the width and height to 138px... In other words, show what you've tried. — Heretic Monkey, Jan 23 '20 at 18:07
@Aaron3219 I didn't say it would. It's a comment, not an answer. — Heretic Monkey, Jan 23 '20 at 18:09
I tried to change the background-size to 50% or to 138px. I also tried to cut the height and width and it did not work either ... — Miguel Moura, Jan 23 '20 at 18:09
You've got 21.5k rep on this site, 45 gold badges. I assume you've read [ask]? Please [edit] your question to include what you've tried and what research you've done. — Heretic Monkey, Jan 23 '20 at 18:11
check this :https://stackoverflow.com/questions/50301190/how-to-scale-css-sprites-when-used-as-background-image/50301296#50301296 — Temani Afif, Jan 23 '20 at 19:31

score 1 · Answer 1 · answered Jan 23 '20 at 18:12

As I understand you you want to have the arrow smaller but still inside a container.

That would work like this:

div.background {
  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;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: scale(0.5);
  transform-origin: top left;
}

.wrapper {
  box-sizing: border-box;
  display: block;
  font-size: 11px;
  height: 276px;
  line-height: 15px;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 276px;
  background: red;
}

<div class="wrapper">
  <div class="background">
  </div>
</div>

If you just want the arrow smaller (without any wrappers) then just remove it.

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;
  height: 276px;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 276px;
  transform: scale(0.5);
  transform-origin: top left;
  line-height: 15px;
  font-size: 11px;
}

<div></div>

score 1 · Accepted Answer · answered Jan 23 '20 at 18:17

add this  transform: scale(0.5);

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;
  transform: scale(0.5);
  left: 20px;
  top: 20px;
  width: 276px;
}

<div></div>

Resize background image sprite component using CSS

2 Answers2