CSS: Box+text over image - html

Question

Firstly, I would like to show you a image(made in paint).
Okay "current" is what I have now. I want to place a box over the image to the right, with black background, and then have text inside this box.
I tried myself using z-index and so, but without any success. Here's what I tried:
<div> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
<div style="margin: auto;">
text text text
</div>
</div>
but this didnt turn out any good. How can i do this?

Answer 1

Something like this?
http://jsfiddle.net/QGMPB/1/
HTML:
<div id="wrap">
<img src="http://jsfiddle.net/img/logo.png" />
<div id="text">text</div>
</div>
CSS
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
position: absolute;
width: 40px;
right: 0;
top: 0;
bottom: 0;
background: black;
color:white
}

Answer 2

Your code is messy and overcomplicated for such a simple issue, you can simplify it a lot by only using two elements. The simpler the better.
Please specify if you need the <img> tag.
HTML:
<div id="golf_course">
<div class="text_wrap_right">
text text text text
</div>
</div>
CSS:
#golf_course
{
background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
background-position: 0 -200px;
width: 900px;
height: 259px;
border: 5px solid #000;
}
.text_wrap_right
{
width: 300px;
height: 100%;
float: right;
background: #000;
color: #fff;
border-left: 2px solid #000;
}
And an example for you here: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/

Answer 3

I prefer a simple and more semantic HTML5 solution
HTML:
<figure>
<img src="..." />
<figcaption>text text text ... </figcaption>
</figure>
CSS:
figure {
position : relative;
z-index : 1;
width : 860px;
height : 240px;
}
figcaption {
position : absolute;
z-index : 1;
top : 0;
right : 0;
width : 200px;
height : 240px;
background : #000;
}

Answer 4

Use position:absolute to overlap 2 divs. You have to play with left and top properties to adjust its position.
<div style="position:absolute"> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%">
<div style="margin: auto;">text text text</div>
</div>

Answer 5

You need to put that text div inside the div that contains the image.. then set top and right to 0px and position absolute. take some hints from here: http://jsfiddle.net/U25XQ/1/

Answer 6

The following example shows how this can be done, please let me know if it is not what you mean: Example.

Answer 7

z-index only works for positioned elements (position: (absolute|fixed|relative)). So you have to position your elements. For example
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;">
<img src="http://w3schools.com/images/w3cert.gif" />
</div>
<div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;">
<div style="margin: auto;">text text text</div>
</div>
</div>
should work.

Answer 8

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>