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 img
s 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
精彩评论