Solved

write over an image

Posted on 2006-06-30
10
1,069 Views
Last Modified: 2008-01-09
Hi, I'm trying to load sever images into a table so there only appears to be one image present.  This I've been able to do fine but when but I need to be able to write over the images so the images act like background.  I assume the way to do this is with layers but I've been unsuccessful so far.  Any suggestions?


here is my code

<html>

<head>
<title></title>
</head>



<style>

body{

background-color:#0f0c67;


}


table{

margin-left: auto;
margin-right: auto;
padding:0px;
border-collapse:collapse;
border-color:#0f0c67;
position:absolute;
}


td {
padding:0px;
margin:0px;
border-collapse:collapse;
border-color:#0f0c67;
}




</style>
<body>
<table>

<tr>
<td>
<!- **************************This is where I'm trying to place the text ********************* ->
<div id="layerHead" style="position:relative; left:0px; top:0px;">
<p>This is a test, I reapeat this is only a test</p>
</div>
<img src="head.jpg" />
</td>
<!- ******************************************************************** ->
</tr>
<tr>
<td><img src="body.jpg" /></td>
</tr>
</table>
</body>
</html>
0
Comment
Question by:sai4
  • 4
  • 4
  • 2
10 Comments
 
LVL 30

Expert Comment

by:callrs
ID: 17021742
Have you tried z-index?
http://www.w3.org/TR/WD-positioning-970131#Z-order     Positioning HTML Elements with Cascading Style Sheets
0
 
LVL 30

Assisted Solution

by:callrs
callrs earned 200 total points
ID: 17021746
Or a background image:
http://www.w3schools.com/html/html_backgrounds.asp     HTML Backgrounds
http://www.echoecho.com/htmlbackgrounds02.htm     Backgrounds : Background Image - HTML tutorial
http://www.w3schools.com/css/css_background.asp     CSS Background Properties
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17023593
I vote for using a background image.
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

Author Comment

by:sai4
ID: 17024275
my problem with using the background image is not dispalyed unless you are you that much area in your document.  I got the layers to work right after I posted this but when I load the layer inside the table, I can still type my way right out of the table.

I'm going to try it with the backgrounds, but is there any way I can confine my <div> to the inside of the table?  I though about setting the width of the div to the width of the picture loaded inside the table.


thank you
Steve  
0
 
LVL 30

Expert Comment

by:callrs
ID: 17024338
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 300 total points
ID: 17024370
if your image is part of the presentation, then using a CSS background image is the only correct way.
if your image is part of the content, then placing it in the html is the only correct way.

from the name of your images (head.jpg, body.jpg), it seems like they are part of the presentation.
0
 

Author Comment

by:sai4
ID: 17025084
if I use background images, is there anyway I can control the size of the image?


thank you
Steve
0
 

Author Comment

by:sai4
ID: 17025202
hey guys below is what I, and it gives me some control over how much background is displayed.  


my problem now is that all my text starts out centered in midle of the page, is there anyone around this.

1) crate a table and load the image  as a background image for the table.  
2)create two images with a very small width and that have the height of the actually image. The color  of the image should match whatever background color is being used.
3) use css to set the width of the table.
(thise doesn't stretch the image at all just displays how much of the background you want displayed)





0
 
LVL 30

Expert Comment

by:callrs
ID: 17027396
Hi. Can't answer yet. Backlogged with work for up for a couple days.
0
 

Author Comment

by:sai4
ID: 17027502
callrs, that's cool

thank you for your help


Steve
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to loop bootstrap columns which contain database records 9 37
Centered Image 2 27
Changing alignment and creating border 6 26
Change Background Color of Website 5 14
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now