Solved

write over an image

Posted on 2006-06-30
10
1,072 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
flex div overflows its container 4 34
Css regex 6 41
Phone Does Not Abide By CSS Breakpoint For Navigation Controls 6 32
Non-Resizable Pharagraph 2 17
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

685 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