Combining text on an image with CSS - html

Question

Good morning!
I have an image and text I would like to combine. I've included the final result I want. So far, with about 20 hours into it, I stil cant seem to create a table using various sections of the image. (My last result: tradecaptain.com/landingpage) I can post the CSS I wrote but as I am new and it is all inline, it's a mess. I have added the image, the final result I want onto the webpage since I can't post an image here. It is below the result of my last attempted table.
I'm at the point of just placing my image with text as one really big image. I would appreciate any pointers in the right direction. If at all possible.
Thank you everyone!!

Answer 1

Try something like this:
CSS
#img{
width: 200px;
height: 200px;
background-image:url(yourImage.png);
background-repeat:no-repeat;
background-position: top left;
}
#txt{
position: absolute;
margin-left: 20px;
margin-right: 20px;
}
HTML
<div id="img">
<div id="txt">
your text
</div>
</div>

Answer 2

Here's my work on how to get it done.
HTML:
<div id="sample">
<div class="a"><div>Take command of your trading</div></div>
<div class="b">with the </div>
<div class="b">Moneymap</div>
<div class="a"><div>Trade the market with confidence</div></div>
</div>
CSS:
#sample {
width:864px;
height:264px;
background-image:url('http://tradecaptain.com/images/CommandMountain.png');
background-repeat:no-repeat;
background-position:right;
}
.a{
text-align:center;
font-size:50px;
}
.a div
{
background:yellow;
width:80%;
margin:0 auto;}
.b{
width:350px;
text-align:right
}
Just give you the idea.
Hope you manage to get it done.
http://jsfiddle.net/EY2VP/1/

Answer 3

this way you can combined the background image with text. Ofcoure you have to play with the value to fit it with your design, but the dummy concept is here.
Here is the CSS and HTML Code. Here is the working Demo link here.
http://jsbin.com/qunojidi/4/
---CSS Code ---
header{display:block;}
div#bgimage
{
background:url("http://lorempixel.com/400/284") no-repeat center right;
width:670px;
height:284px;
}
div#bgimage p
{
font:arial;
font-size:1.2em;
width:290px;
margin:0; padding:0;
}
div#bgimage h3 em, div#bgimage h3
{
font-size:1.5em;
word-break: break-all;
width:260px; display:block;
text-align:right;
margin:0 0;
padding:0;
}
h1, h2
{
background-color:rgba(245, 217, 110, 0.5);
color:#2D2376;
font-size:2.1em;
display:inline-block;
text-align:right;
margin:5px 0; padding:5px 0;
}
----HTML Code ---
<header>
<div id="bgimage">
<h1>Take Command of your Trading </h1>
<h3>with the <em>Money Map</em></h3>
<h2>Trade the markets with confidence</h2>
<p>Read the Market. Rule your Risk. Take the Money.
Trade Forex, futures, commodities and stocks</p>
</div>
</header>

Answer 4

Thank you everyone for your generous time and assistance! I'm new to CSS so this was not only helpful in this case, but also for my learning process. I've called Heaven and reserved first class seats for all of you :)
I've had to play around with it to get it to look like I want. Hopefully, I've not done anything invalid. I've only tested it on Chrome. Here's what I finally went with:
HTML
<div id="LandingImage">
<h1>
Take Command of your trading</h1>
<h2>
with the</h2>
<h3>
Moneymap</h3>
<p><text1>Read the market. Rule your risk. Take the money.</text1> <text2>Trade forex, futures, commodities and stocks.</text2></p>
<h4>
Trade the markets with confidence</h4>
CSS
header{display:block;}
#LandingImage {
background:url("http://tradecaptain.com/images/CommandMountain.png") no-repeat center right;
margin:50px 0px 0px 0px;
width:856px;
height:284px;
}
#LandingImage h1 {
background-color:rgba(255, 210, 50, 0.7);
color:rgb(0, 0, 100);
font-size:38px;
display:inline-block;
text-align:right;
margin:0px 0px 0px 50px;
padding:15px 8px 15px 8px;
}
#LandingImage h2 {
font-size:28px;
width:340px;
display:block;
color:rgb(0, 0, 100);
text-align:right;
margin:30px 0px 0px 0px;
padding:0;
}
#LandingImage h3 {
font-size:50px;
word-break: break-all;
width:340px;
display:block;
color:rgb(0, 0, 100);
text-align:right;
margin:30px 0px 0px 0px;
padding:0;
}
#LandingImage text1 {
color:rgb(0, 0, 100);
font-size:16px;
display:block;
width:348px;
padding:0px 0px 0px 0px;
margin:35px 0px 0px 0px;
}
#LandingImage text2 {
color:rgb(0, 0, 100);
font-size:16px;
display:block;
width:339px;
padding:0px 0px 0px 0px;
margin:5px 0px 0px 25px;
}
#LandingImage h4 {
background-color:rgba(255, 210, 50, 0.7);
color:rgb(0, 0, 100);
font-size:38px;
display:inline-block;
text-align:right;
margin:4px 0px 0px 5px;
padding:15px 8px 15px 8px;
}
Granted, it's not pretty. But hey, I'm new ;) Any further educational pointers are appreciated. Now I'm off to figure out how to put two links under it and another table! Wish me luck.
Gratefully,
Alexander