text on image

Hey guys,

I´m new to the forum and also pretty new to html/css... now i was creating a website for my custom map in starcraft 2 and stumbled uppon a problem..
So below i have pasted the code and an image of what is wrong, here's the problem:

I was trying to create like sort of a background image for a div that stretches to the max size of the div which in my case is the image for the "messageboard". Now after that i tried to put some text on the image but whenever i try to (have tried a lot of stuff..) the div in which i put the text always seems to push away the messageboard image... i tried stuff like floating but its really wearing me out. if anyone could have a look id be grateful.


#right_content
{
float:right;
margin-right:100px;
width:900px;
height:800px;

}
.messageboard img
{

width:100%;
height:100%;
}

}
.content {
float:left;
width:900px;
height:800px;
display:inline;
}
.content h1
{
text-align:left;
color:#FFFFFF;
}

<div id="right_content">
<div class="messageboard">
<img src="../../../../Desktop/website/desert%20strike%20website/contentborder.png" alt="logo" />
<div class="content">
<h1>I want to be on top of the messageboard image :(</h1>
</div>
</div>
</div>



thnx,

Rice

Try position absolute. Also, as you're specifying that the element be inline, you can't declare a size to it.


.content {
position:absolute;
top: 0;
left: 0;
display:inline;
}

Why don't you use a background image instead.

.messageboard {background-image:url(../../../../Desktop/website/desert%20strike%20website/contentborder.png);}

Hey,

i tried adjusting the .content css but this doesn't seem to work, i also tried putting the image as a background for .message board but then my whole idea of the image stretching to the size of the div goes away cause when i resize the div it just cuts off the background and doesnt fit it to the div.

to be more clear on why im not using it as background, lets say: i have different pages which contain the right_content div with the messageboard but with a different size, if i would use the same image as the background, it wouldn't show up right. But if the images fits to the div, i can always use the same image.

Though the replies weren't very helpful thanks for your time anyway.

I fixed it by giving the content div position:absolute; and then i had to give a lower z-index to the messageboard than the content that i want to display on it.

yaaaaay

Though the replies weren't very helpful thanks for your time anyway.

I fixed it by giving the content div position:absolute; and then i had to give a lower z-index to the messageboard than the content that i want to display on it.

yaaaaay

I did say to give it absolute positioning, so you can't say we were that unhelpful.