Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

write over an image

Posted on 2006-06-30
10
Medium Priority
?
1,079 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 800 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 1200 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

972 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