CODEWITHSUNDEEP
htmlcss
Sasha
Sasha

Reputation: 8705

CSS - background image in the right padding

I have an a tag with right padding of 20px. How can I put just the right part of this image as background inside padding?

enter image description here

CSS rule for now:

.mali_oglas_kontrola a {padding-right: 20px }
.mali_oglas_kontrola a:first-of-type {background: url('../img/resursi/mgl_kontrola.png') no-repeat -17px 0;background-position: right top}
.mali_oglas_kontrola a:first-of-type:hover {background: url('../img/resursi/mgl_kontrola.png') no-repeat -17px -20px; background-position: right}

Upvotes: 1

Views: 1935

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

You can not..

Insert another element inside your a tag that will hold the icon..

<a href="...">whatever <i></i></a>

and use 

.mali_oglas_kontrola a i{
    display:inline-block;
    width:..;/*exact width of icon*/
    height:..;/*exact height of icon*/
    background: url('../img/resursi/mgl_kontrola.png') no-repeat right top;
}
.mali_oglas_kontrola a:hover i{
    background-position: right -20px;
}

Upvotes: 3

Related Questions