0

Is there a way to display a background image from right in percents? In pixels the values working well, but not in percents! JSfiddle

html:<div></div>

css:

div {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png');
  background-size: auto 90%;
  background-position: right 20% center;
  background-repeat: no-repeat;
}
Alireza
  • 2,319
  • 2
  • 23
  • 35
Eugene Mikhushkin
  • 155
  • 2
  • 10
  • I don't see the problem. Can you specific the browser? – Lifka Jul 03 '17 at 10:17
  • Did you take into account that those percentages are based on the actual size the image displays in (regarding your `background-size: auto 90%`) …? – CBroe Jul 03 '17 at 10:29

2 Answers2

1

Your background is too big. It's bigger than 100%. That gives you unpredictable result! Here you can see you code with smaller size of png, working as expected! 

div {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png');
  background-size: auto 10%;
  background-position: right 10% center;
  background-repeat: no-repeat;
}

https://jsfiddle.net/zn2ujy4b/

Alireza
  • 100,211
  • 27
  • 269
  • 172
Max Levitskiy
  • 54
  • 2
  • 6
  • Background image should have possibility to overflow by x axis in left side. When I start to scale image width to 90% and over, `background-position` percentage working as not expected. – Eugene Mikhushkin Jul 03 '17 at 13:27
0

I think you might have an error. You are saying:

background-position: right 20% center;

It should be X% Y%:

div {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png');
  background-size: auto 20%;
  background-position: 90% 50% ;
  background-repeat: no-repeat;
}

JSFiddle

user1156544
  • 1,725
  • 2
  • 25
  • 51
  • They are referring to the “extended” syntax for specifying _edge offsets values_, see https://developer.mozilla.org/en/docs/Web/CSS/background-position – CBroe Jul 03 '17 at 10:30