CODEWITHSUNDEEP
htmlcss
Tim Aych
Tim Aych

Reputation: 1365

Link with an image - How to show link's background image above link-image

So I have a link with an image:

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">
    <img src="../gs1.jpg" alt="YouTube" />
</a>

and the link has a background image:

<style>
    a {
        z-index: 99999;
        background-image:url('../[email protected]');
    }
</style>

The background image is not being displayed. If I blank out the image url for the link-image, I do see the background, it's just once the link-image is visible it blocks the link-background-image.

Is what I'm going for possible? If so, any advise would be much appreciated.

Upvotes: 0

Views: 170

Answers (2)

user2915403
user2915403

Reputation:

A background image is what the name implies - a background image - and hence it can not be drawn on top of the elements' content.

Looking at your code I assume you want to display a play button on top of a thumbnail. And I'm assuming the play button is transparent.

I would use this CSS:

a {
    display: inline-block;
    position: relative;
}

a:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url('../[email protected]');
}

Relative positioning of the anchor is very important as this generates the basis for the ::after pseudo element to properly position and size itself.

No z-index is required as ::after pseudo element comes after the content in the document flow and is thusly rendered on top of the content with the above CSS.

I would strongly recommend assigning classes to anchors in question, as it is doubtful you wish to show the play image for every a in the document.

HTML is fine as it is.

Upvotes: 2

Barnee
Barnee

Reputation: 3389

I made a working example for you:

HTML:

<a href="#">
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-128.png" alt="YouTube" />
</a>

CSS:

a {
    width: 200px;
    height: 200px;
    display: block;
    z-index: 99999;
    background:#000 url('http://jsfiddle.net/img/logo-white.png');
}

FIDDLE

Upvotes: 1

Related Questions