CODEWITHSUNDEEP
htmlcssbackground-imagepositioning
sanainfotech
sanainfotech

Reputation: 691

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

Upvotes: 4

Views: 7285

Answers (6)

Subodh Kalika
Subodh Kalika

Reputation: 11

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

Upvotes: 0

Patrick Ferreira
Patrick Ferreira

Reputation: 2063

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>

Upvotes: 0

GMchris
GMchris

Reputation: 5658

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.

Upvotes: 5

Patrick Aleman
Patrick Aleman

Reputation: 619

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> .

Upvotes: 0

Nick
Nick

Reputation: 3281

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>

Upvotes: 1

David H.
David H.

Reputation: 963

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

border-right: 10px solid #5379A5;

Upvotes: 0

Related Questions