CODEWITHSUNDEEP
htmlcsshtml-table
GAMA
GAMA

Reputation: 5996

Writing text on an image with HTML

I'm new to HTML and want to display image shown on left.

I have displayed the image which is a table row but I'm not able to get that text (IN shown below blog.com).

How can I write on the image?

Any help appreciated.

EDIT

I tried

.logoBg
{
    background-image: url('images/logo01.gif');
    background-color: #72c2dd;
}

and

<tr class="logoBg">
    <td colspan=5>IN
    </td>
    </tr>

But I'm only getting text and background color, but NO background image.

Upvotes: 3

Views: 40967

Answers (5)

user188755
user188755

Reputation: 11

@Ecnalyr is right, but if you use position:absolute, the position is calculated from the top left corner of your browser. I really doubt that's what you want. Rather, use position:relative and position your text using +ve and -ve numbers to position your text on the image relative to wherever you place the div

Upvotes: 1

Ecnalyr
Ecnalyr

Reputation: 5802

As an example:

You could use this as your HTML:

<tr>
<div class="image">
  <img alt="" src="http://www.YourDomain.com/img/yourImage.jpg" />
  <div class="text">
    <p>This is some demonstration text</p>
    <p>This is some more wonderful text</p>
  </div>
</div>
</tr>

then this as your CSS:

.image {
    position:relative;
}
.image .text {
    position:absolute;
    top:10px;
    left:10px;
    width:300px;
}

This will place text directly on an image.

Upvotes: 10

OJay
OJay

Reputation: 4921

If the containing element of the image has position: relative applied, then you can add an additional element that is positioned absolutely on top of the image

Upvotes: 0

Bazzz
Bazzz

Reputation: 26942

Use the image as a background-image and put the text in the same element:

HTML:

<table>
 <tr>
  <td id="myTableCell">
   In
  </td>
 </tr>
</table>

CSS:

.myTableCell {
  background-image: url(Images/MyImage.png);
}

Upvotes: 2

Chris Li
Chris Li

Reputation: 3725

You can use background-image css to make the image as a background of this table cell, and write text in that cell.

Upvotes: 0

Related Questions