Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

write over an image

Posted on 2006-06-30
10
1,071 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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 applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

839 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