Take the 2-minute tour ×

I want to place a div over an image. As of now I think I want it towards the top left of the image. This needs to be compatible with views on different screen sizes so I don't think an absolute positioned div will work... How can I do this? Please help.

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

You can put the image as a background of a div and insert another div in the first one. Something like this:

<div style="background: url('myimg.png'); width: '100px'; height: '100px' float: left;">
   <div style="float: left;">TEST</div>

Test will appear on the top left side of the image.

share|improve this answer
Thank you. When I preview this in IE my font color changes and the div width increases to 100% of the div it is inside. .divlocation { color: #FFF; float:left; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); max-width: 100px; } <div style="background:url(../images/circleimage.jpg); width: 311px; height: 211px; float: center;"> <div class="divlocation">thisdivsucks</div> –  user2152326 Mar 10 '13 at 16:43
is this not IE compatable? –  user2152326 Mar 10 '13 at 16:50
I'm not sure what exactly you're trying to de. –  ShiranR Mar 10 '13 at 16:51
I want to have a div on top of an image. So I followed your directions but it isn't working. Is it possible that the problem is that these two divs are inside tables and other divs? –  user2152326 Mar 10 '13 at 16:55
Yes this is compatible with all browsers I checked it. Not sure but in the code you pasted you are missing: '</div>' in the end is it a pasting error? –  ShiranR Mar 10 '13 at 17:00
show 4 more comments

A <div> already starts at the top left of its parent element. Since it's a block level element you will have to specify a width or else it will take up all the available space.

Working example: http://jsfiddle.net/pd39B/

<img src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">

div {
    height: 50px;
    width: 50px;
    background-color: blue;
share|improve this answer
add comment

this is a bit trickier ...

Placing a div over an iframe/video...

(just replace the iframe w/ your image) ....

trick part is for video ... you must add ... ?wmode=transparent ... to the end of the src url...

<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr {position:absolute; top:7px; left:7px; width:90%; height:90%; background-color: #a3E1a6;  opacity:0.5; }

<div id="Cntr0" class="Container" style="width:220px; height:140px;">
    <iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
    <div id="div0" class="Lyr" ></div>
share|improve this answer
add comment

Your Answer


