View Full Version : How would I add text over an image?

12-28-2006, 10:05 AM
Hey I have a question. How would I be able to add text over an image in dreamweaver? First of all, using Photoshop, I would have all the images sliced and then use dreamweaver. How would I do it without messing up the template in dreamweaver? Because whenever I try to add text, one of the template images move and is displaced.

Before I would just do all the text in Photoshop as well, but they all end up being images. You know how on websites you can copy the text. Well I want to be able to do that on mines.

Thanks in advanced.

12-28-2006, 10:17 AM
You need to make the image a background image rather than an actual image tag. Then you will be able to put text in the element that you put the background image on. If you don't know how to do that then I suggest you go read some tutorials on basic html and CSS.

12-28-2006, 07:11 PM
Can you link me to these tutorials? I know there are a lot of tutorials on html and css, but I want it on exactly these topics. Please help. Thanks

12-28-2006, 09:25 PM
Its really not that hard.

<td style="background:url(linktoimage.jpg);width:#px;height#px">some text</td>
www.htmldog.com is a good site to learn from as is www.w3schools.com
It seems like you just dove into html not knowing what you were doing.

12-28-2006, 10:43 PM
Yea I just did kind of. I know how to make the template and all but I have trouble with the text. Thanks though.. if there is anymore I need to know then please help. Thanks

12-29-2006, 03:01 AM
Something like this?

<td style="background:url"(images/top_mainfeature.gif)" width="592" height="215" alt="">TESTTT</td>

I can see the text but the picture is moved either to the right or left and is displaced.

12-29-2006, 03:10 AM
Then you need to post a link to your page or something. The background image shouldn't change placement.

12-29-2006, 05:41 AM
I think it is because I didn't make it a background image.

You need to make the image a background image rather than an actual image tag.

Would I have to do this for every part of the template? If I were to make it a background image, I would do it in Photoshop correct? In Photoshop I would do, save for web and save as images only? At the moment, I have it as images and html. I think my problem occurs way before dreamweaver. Sorry if I'm newbie.

12-29-2006, 05:56 AM
Making an image a background image is done through the coding, not through the image editing software.

You can use any image as either a background or inline image.

Inline Image code:
<img src="myimage.jpg" />

Background Image code:
<h1 style="background:url(images/myimage.jpg);">Text with background image</h1>


PS- You seem to have an extra " in your code, between background:url and (image path)

12-29-2006, 06:33 AM
Ah I see. I understand this quite better now. I tried it myself and it seems to work. I still have some problems but I will try to figure them out by myself for now. Thanks, I will be posting further questions soon.

12-29-2006, 05:12 PM
<h1 style="background:url(images/myimage.jpg);">Text with background image</h1>

How would I add the width and size for this? thanks

12-29-2006, 05:23 PM
Nevermind I got it.

12-29-2006, 07:20 PM
I got the hang of it but its still annoying, is there another way to do this? Is there like a program where u can just open the .html file and add text to it as you would in like photoshop adding text.

12-29-2006, 07:26 PM
Dreamweaver can do this but then again if you are wanting the easy way out then why are you even trying to do web design in the first place? How do you think everyone else does it? I code by hand setting background images to elements I want to place text over. Its the way to do it.

12-29-2006, 09:48 PM
Hm.. now I see why it takes a lot of time and money. I didn't mean it as an insult, I just figured there has to be a tool like this to make it easier, but then i guess there isn't. Thanks though.