View Full Version : Placing Text infront of background Image

Nov 11th, 2006, 09:02 PM
Hi, I need some help with my web page:

I want to place the title in front of the black header image (Verdana 30px Bold), and the sub-title beside it (which is Verdana 15px bold).

Explanation Image (http://img486.imageshack.us/img486/2407/previewwm6.gif)

This code is what i've been working on, but to no avail. The texts never show up at the right spot.

<div style="font-family: Verdana; padding: 0px 0px 0px 0px; color:#ffffff; width:auto; position:absolute; left:300px; "><b><span style="font-size:30px;"><br />Verdana 30 Header</b></div>

<b><span style="font-size:12px;">Verdana 15 subheader</b></div>

I am a CSS newbie, any code suggestion/help will be appreciated. Thanks

Nov 11th, 2006, 10:11 PM
Scrap all of that above; I haven't even looked at it properly but anything with absolute positioning for something like that is wrong! :)

Firstly use the correct HTML tags. You have a heading so use a heading tag...

<h2>Heading<span>Heading 2</span></h2>
<p>All of your text.</p>

Then you can work on the CSS.

div {
background: #CCC;

div h2 {
background: #000;
color: #FFF;
font: 30px Verdana;
padding: 10px;

div h2 span {
font-size: 12px;
margin-left: 50px;

div p {
font: 12px Verdana;
padding: 20px;

That should get you closer to what you want. :)

Nov 11th, 2006, 11:29 PM
Thanks for the help. But here's the problem:

Table Code:

<center><table border="0" width="66%" id="table1" cellspacing="0" cellpadding="0">
<img border="0" src='/header_grey.gif'>
<td height="24">
<img src='/header_black.gif'>
<img border="0" src="/red_header.gif">

The header is made of a table. grey part is the first column, black (main header) is the second and the red part is the bottom column. The golden square indicated in the Explanation is where I want to put my header text (which is 30px Verdana, Bold), while the Green square is the subheader.

The text between the black and red header is what I got from the code you suggested.

Explanation (http://img177.imageshack.us/img177/770/previewau1.gif)

Nov 12th, 2006, 04:09 PM
The text between the black and red header is what I got from the code you suggested.

Explanation (http://img177.imageshack.us/img177/770/previewau1.gif)This image doesn’t appear to work. It may just be ImageShack though…