CODEWITHSUNDEEP
htmlcss
Anirudha Gupta
Anirudha Gupta

Reputation: 9299

How i can set the background image of image?

I have a image who's width and height i got in Javascript. i want to set the background image on image.

means to the background image is look like image as youtube show the image on video called play icon.

i want to show them on image. can someone tell me how i can set playicon over the image.

Upvotes: 0

Views: 88

Answers (1)

Sotiris
Sotiris

Reputation: 40096

I didn't understand exactly your question. I suppose you want to place img over a background-image if yes check the following example:

html

<div>
    <img id="play" src="http://dummyimage.com/40x40/454/000&text=Play">
    <img id="pause" src="http://dummyimage.com/40x40/848/000&text=Pause">
</div>

css

div {background:url("http://dummyimage.com/300x300/000/fff&text=video") no-repeat;
    height:300px;
    width:300px;
    position:relative;
}
img#play {
    position:absolute;
    bottom:0;   
}
img#pause {
    position:absolute;
    bottom:0;
    left:40px;
}

Demo: http://jsfiddle.net/ACazB/

div has position:relative and imgs inside div have position:absolute. This will allow you to manipulate the position of any images in the scope of div. Using box offsets top, bottom,left,right you can move the images in the place you need.

http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

http://www.w3.org/TR/CSS2/visuren.html#position-props

Upvotes: 1

Related Questions