CSS: Box+text over image
35,549
Solution 1
Something like this?
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
}
Solution 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/
Author by
Karem
Updated on July 22, 2022Comments
-
Karem almost 2 years
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?
-
Kyle over 13 yearsAnd that's how to do it still keeping that img element! :)
-
Stephan Muller over 13 yearsYeah, your code is exactly the same except for the img tags. Just depends on the situation which of the two is better :)
-
Admin over 13 yearsdiv-ification is not a clean solution, especially when appropriate tags exist
-
Kyle over 13 years@Karem then Litso's answer is for you.
-
Admin over 13 yearsall browser can support new elements, even IE with html5shiv. If a technology should be finished before being used then I would not even use CSS 2.1 (not completely supported by ALL browser).