HTML/CSS - Displaying text over an img tag

I'm trying to display two images side to side, with text, controls and whatever else my heart desires over them. To do this, I have the following:

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

This is all grea开发者_Python百科t except for one little thing... The left div, the "redbox.png" is always scooted down by the number of s I want inside it (or any place taken by the elements). I could place the elements after the image, but it's really easier to place them where I want this way, and to keep them in place when I animate the boxes.

Now, why am I using images instead of background-img? Well I want the images to resize to the surrounding <div>s automatically, and this is the only way I found of doing it easily (resizing manually with javascript is an option, but a complicated one at that, since the boxes will be animated).

Any ideas? Thanks!

You should use position:absolute rather than position:relative in order to take the element out of flow. You will need to adjust the left and top attributes, however.

http://jsfiddle.net/3fJcR/1/

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <div style="position:absolute; left:61px; top:50px; width: 319px; z-index:1">This is text</div>
        <div style="position:absolute; left:61px; top:64px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

You can have position:absolute for your wrapping div and position:absolute for inner overlay too. Then the inner absolute is relative to outer absolute positioned element not the body.

Look at this example to see what I'm saying:

http://jsfiddle.net/mohsen/TbkjK/7/

For writing text over image you put image in background style and alt text like this-

<img scr="" alt="text"/>

<style>
.img{background-image:url('IMAGE_URL'); }
</style>