开发者

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 o开发者_如何学Gon 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.


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜