ansaurus

Question

Answer 1

+1 A:

With jQuery you could use the dimensions plug-in to get the size of the image. You could then easily modify the style of your div.

kgiannakakis 2009-03-05 13:05:06

Answer 2

+2 A:

What about this?

<div style="position: relative;">
  <img src="..." />
  <div style="position: absolute; top:0; left:0">!!! TEXT HERE !!!</div>
</div>

palig 2009-03-05 13:11:15

This is an excellent answer if the size of the image is not known (which is what the original poster stated).

Traingamer 2009-03-05 15:21:40

Thank you Traingamer, good to know that somebody really read original question. Background-image is a good solution but you need to know size of an image. And if you know it you can also use that - margin solution, don't you? :)

palig 2009-03-05 19:46:17

Indeed--thanks for the feedback though. Since i do not know the height of my image this will not work consistently.

jakejgordon 2009-03-05 22:44:30

Hmmmm did I miss something? You don't need to know image size with this solution.. Text will be moved to the top-left corner of your image.

palig 2009-03-06 05:48:47

Answer 3

+2 A:

Background images are best for this. Somethign like

<style>
.thing {
  background-image: url(myimage.jpg);
  background-repeat: no-repeat;
  padding: 10px;;
</style>


<div class="thing">My Text</div>

2009-03-05 13:16:40

Just make sure to explicitly set the DIV's dimensions to those of the background image.

Pawel Krakowiak 2009-03-05 13:36:32

Thanks for the feedback. Since i do not know the height of my image this will not work consistently because 10px may be 75% of my image or it may be 2% of my image--in which case the text looks bad.

jakejgordon 2009-03-05 22:46:59

Answer 4

+1 A:

Background images aren't the best - especially in case we don't exactly know also other parts of the page - so it's hard to tell how should they be used.

With background-images you are not able check image's size! Don't forget about that.

palig 2009-03-05 13:31:45

Answer 5

A:

If you want it to work with a background image, try this:

    .btn {position: relative; background-image: url('yourimagehere.png'); width: 100px; height: 20px;}
    .btn span {position: absolute; top:0; left:0; width: 100px; height: 20px; }

    <div class="btn">
         <a  href="#">My Text<span/></a>
    </div>

Note, you need to set the width and height as appropriate for your button in the css.

Martin Clarke 2009-03-05 13:46:45

Thanks for the help. The problem (as mentioned in comments to the other answers) is that I do not know the height of the image--therefore this will not work.

jakejgordon 2009-03-05 22:51:31

Answer 6

A:

Well I was able to get around this after realizing that in the particular case in which I am interested, all images will in fact have the same height. Since that is the case, the following markup worked just fine for me:

<head>
<style type="text/css">
  .myClass {
    text-align:center;
    margin-top:-35px; /*set this to the distance from the bottom*/
    font-weight:bold;
    font-size:18px;
    color:#fff;
    background-color:#111;
    width:160px;
   }
</style>
</head>
<body>
<img src='My Fixed Size Image' />
<div class='myClass' runat='server'>MY TEXT HERE</div>
</body>

jakejgordon 2009-03-05 23:03:10

Answer 7

A:

Why not just use a div by itself?

<div style="display:inline;background:url('img.png');width:128px;height:128px;">text here</div>

a2h 2009-03-14 04:29:01

Your solution would probably work fine now that I am able to assume that i have a fixed width and height. My original question wouldn't have allowed for that though as i did not know the height of my image.

jakejgordon 2009-03-17 18:30:23

ansaurus

tags:

views:

answers:

Overlay Text On ImageButton

related questions