'Background image position with padding

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

enter image description here

As you can see there must be padding right after the arrow to have nice space. How can I solve this issue?

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%;
}
htmlcssbackground-imagepositioning


Solution 1:[1]

You can position a background image FROM the right by writing this in your css.

background-position: right 10px center;

I consider this to be the cleanest solutions.

Solution 2:[2]

You can do it 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>

Solution 3:[3]

You can add a right border with the same color as the background :

border-right: 10px solid #5379A5;

Solution 4:[4]

A background image does not take padding into account, use background-position for that or split up your <span> into <span>newsletter sign up<img></img></span> .

Solution 5:[5]

Here it 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>

Solution 6:[6]

Since, you have given float:right its going to be in right .

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GMchris
Solution 2 Nick
Solution 3 David H.
Solution 4 Patrick Aleman
Solution 5 Patrick Ferreira
Solution 6 Subodh Kalika

Related Questions