Position of background image with fill

Question

I have an icon as a background, as shown below:

As you can see, there should be a fill right after the arrow to have a nice space. How can I solve this problem?

HTML

<span class="arrowIcon">Newsletter Sign up</span>

CSS

.arrowIcon{
  background-image:url(../img/arrow.png);
  background-position:right center;
  background-repeat:no-repeat;
  background-color:#5379A5;
  padding:10px;
  color:#FFFFFF;
  float:right;
  width:55%;
}

Answer 1

You can put the background image on the right by writing this in your css.

background-position: right 10px center;

I think these are the cleanest solutions.

Answer 2

You can do this with calc.

#test {
  background-color: moccasin;
  width: 500px;
  height: 100px;
  background-image: url('http://www.math.muni.cz/~bulik/gifs/arrow.small.left.gif');
  background-position: calc(100% - 10px) center;
  background-repeat: no-repeat;
}

<div id="test">

</div>

Run code

Answer 3

, :

border-right: 10px solid #5379A5;

Answer 4

, <span> <span>newsletter sign up<img></img></span>.

Answer 5

There he is:

.arrowIcon {
  background-image: url(http://www.clker.com/cliparts/7/6/4/a/1206569902228245216pitr_green_single_arrows_set_1.svg.hi.png);
  background-position: 95% center;
  /* adjust the 98% as your needs or put px value instead if you know extact div size */
  background-repeat: no-repeat;
  background-color: #5379A5;
  background-size: 1em;
  padding: 10px;
  color: #FFFFFF;
  float: right;
  width: 55%;
  
  /* to display correctly in SO */
  position: absolute;
  top: 25%;
  right: 0px;
}

<span class="arrowIcon">Newsletter Sign up</span>

Run code

Answer 6

Since you gave float: correctly it will be correct.