ive been trying to place my div on top of a image, i know its possible but havent figured it out best i do is make my image the backgrounds and lower it with < br> </ br> codes and space for the left right lol but this is no longer feasable i need to be able to place my div on the of the image at a spefic location say ------------------------------------- This is my image ------------------------------------ ------------------------------------ This is my image [DIV HERE] ----------------------------------- thanks for any help
There are a few other ways but I like this one: <html> <head> <style type='text/css'> #imageBox { background: url('image.jpg') no-repeat; height: 100px; margin-bottom: 50px; position: relative; width: 100px; } #content { bottom: 0; position: absolute; } </style> </head> <body> <div id='imageBox'></div> <div id='imageBox'> <div id='content'>Text</div> </div> </body> </html> Code (markup):
Dang! I repeated an ID, maybe that was the problem. Just change them to classes. Another way is to apply margins or paddings, but that can be more trouble than positioning. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html> <head> <style type='text/css'> .imageBox { background: url('image.jpg') no-repeat; height: 50px; margin-bottom: 20px; width: 100px; padding-top: 50px; } </style> </head> <body> <div class='imageBox'> <p>Text</p> </div> </body> </html> Code (markup):
i think your question has already been answered, but just to clarify, it is best that you absolute position elements within a parent container when you want them to overlap something else
What you can do is delete the image, place a div and put the background image of the div as your image. Simple