473,405 Members | 2,141 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

How to place text on top of images?

347 100+
I am converting a psd file to html and I have an area that is an img file that I need to have text on top of and still have the background image show through. I've looked at layering this with dreamweaver and <div> tags but when I look at the live page, the background image isn't showing through. Can you put text on top of an image and have the layer (except for the text) be transparent??

Any help would be appreciated,

Thank you

Doug
Nov 18 '10 #1
4 1990
JKing
1,206 Expert 1GB
Just for clarification. You have a background image and on top of that you want to place an image that should be transparent and on top of that you want to have text? Is this correct?

Do you have an example or a picture that could clearly display what you are attempting to do?
Nov 19 '10 #2
If the image must be transparent, why the use of it. Like JKing said, a example would be very helpful.

But on first sight I would say; a div with on top of that a paragraph which has a background.

-Bryan
Nov 21 '10 #3
The only way you can do it is to first make you image transparent using photoshop etc and then use this image as backgroung in your <div> tag over the background.Otherwise if you try to make your <div>, containing the image, transparent then your text in side that <div> will also become transparent.
Nov 21 '10 #4
Death Slaught
1,137 1GB
Assuming that you answer yes to JKing's question.

Yes, one option would be to place the text in a separate p, div, any block level element really and position it absolutely.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5.     <head>
  6.         <title></title>
  7.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     </head>
  9.  
  10.     <body>
  11.  
  12.     <div id="wrapper">
  13.  
  14.         <!-- This division will have the transparent styles, and contain the image. -->
  15.         <div class="transBox">
  16.         </div>
  17.  
  18.         <!-- This paragaph will be positioned abosuletly, and contain the text. -->
  19.         <p class="transTxt">
  20.         </p>
  21.  
  22.     </div>
  23.  
  24.     </body>
  25.  
  26. </html>
If you would like for me to explain the CSS involved feel free to ask.


Regards, Death
Nov 22 '10 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: bart | last post by:
I'm trying to place text at a certain point on the console. But I can't figure out any way to do this. For instance place a '@' at point 6,8. Any hints? (I'm trying to display a 'map'. Think...
1
by: Valerie Hough | last post by:
I am using the ContentAlignment property, and it seems to make no difference. Is this the right property, and if so, what else might I be doing wrong? Thanks in advance. Chris Hough
1
by: Dirk Reske | last post by:
Hello, i'm looking for a way to show formatted text and images (e.g. animated gif's) in an edit control... like in many chat programs does somebody know how to make this? thx *** Sent via...
2
by: MickT | last post by:
On an MDI application in VB.NET, I have one child form with a multiline text box. I am opening another child form, from the first form, as a "help" to create a SQL statement on the first form, by...
1
by: caesarkim | last post by:
I have code like this. I want "Hello World" to be placed on top of 'big_icon.gif' image which is width: 179 height: 35px. The following code doesn't work with firefox and IE. The image appears, but...
2
by: Jeff | last post by:
hey asp.net 2.0 Below you see my code. #1 How to place the text at the buttom right of the image? I mean how do I calculate the x,y parameter of the DrawString method?
2
by: samvb | last post by:
Hi, I have this code: CSS: .onlineuserscon {width:98%; float:left; background-color:#fff;} .onlineusersul {list-style:none; margin:0; padding:0;} .onlineuserimg {width:150px; padding:7px;...
2
by: Chris Silver | last post by:
Using the code below this is what I want to do: In this instance, as is, upon clicking on the text, "sample text" the image pic657.gif appears. Upon clicking upon image pic657.gif, it is replaced...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.