CODEWITHSUNDEEP
htmlcssimagehyperlinkbackground
jublikon
jublikon

Reputation: 3447

Turn Div Background-Image into link

I have a div with a background image:

enter image description here

You will notice that it is just a small arrow. I am using the background-image because it is easy to center images with it.

Now the Arrow needs to be a link. My Problem is, that the div has 100% width to center the background-image properly: So when I use <a> the full div can be clicked anywhere and it is working as a link.
Do I have any possibility to make only the arrow clickable as a link using background-image?

My HTML:

<div class="row3">

    <div class="ArrowToTop" style="background-image:url(../img/basics/ArrowToTop.png);background-size: contain; background-repeat:no-repeat; background-position:center center;">
    <a href="#firstPage" style="display:block; width:100%; height:100%;"></a>
    </div>

</div>

CSS:

.row3 .ArrowToTop{
    width:100%;
    height:50%;
}

Upvotes: 1

Views: 4253

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

Make your life easier and don't use inline styles.

a should be inline-block or inline and the parent should have text-align:center.

Upvotes: 2

Related Questions