CODEWITHSUNDEEP
css
Gajen
Gajen

Reputation: 466

How to show background image above border?

I have tag with 25px padding and 15px border from left. And I am using arrow background image in it. Is it possible to show this background image above the border?

Here is HTML 

<a id="arrow">List</a>

CSS 

a#arrow { 
    background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
    padding-left:25px;
    border-left:15px solid #f1f1f1;
}

Here is jsfiddle link

Upvotes: 0

Views: 2865

Answers (3)

Nidhin S G
Nidhin S G

Reputation: 1695

You can use background position to view your image. here is fiddle

Your css should be

a#arrow{ background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
background-position: -36px;
}

Upvotes: 1

AlexTroy
AlexTroy

Reputation: 405

You can put your background to the :after element as a method

CSS

#arrow:after {
    content:'';/*enable after element*/
    position: absolute;
    top: px;/*position of the background*/
    left: px;/*position of the background*/
    background: url(img/your-bg.png)  no-repeat;
    width: px;/*width of the background*/
    height: px;/*height of the background*/
}

And dont forget to add position:relative to the #arrow

Upvotes: 3

Nitesh
Nitesh

Reputation: 15779

Use background-position property with values in pixels to show them on top.

For instance,

background-position: xxpx (for left-right) xxpx (for top-bottom);

PS: xx is a dummy value, which you can replace with actual numbers.

Upvotes: 0

Related Questions