It's been so long since I last did this I seem to have lost the knack. Can someone please talk me through how I add a background image to a table and then write text over it? I downloaded a jpeg background image from another website but am not sure how to use it for the purpose I want. I seem to recall having code to work with previously but this just seems to be an image. Help, I'm losing the will to live! Thanks.

Here's a link to a tutorial that shows a simple way to add a background image to a table: Tutorial

One thing to note: if the table size is larger than the image, the image will be repeated. This may or may not matter, depending on the image.

Many thanks, Dick. I'll take a look.

There are days when I feel more foolish than others. This is one of them!

Still can't work out where I'm going wrong as the background is covering the whole page instead of just the table area. I've created a single cell, borderless table and want to add the following MySpace code to create the background and then add text over it -

[style type="text/css">
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
   background-image:url('http://www.wonderbackgrounds.com/background/marble_1.gif');
   background-attachment:fixed;
   background-repeat:repeat;
}

Myspace Backgrounds

NOTE: Change "[" to "<" and "]" to ">" around the style code
How do I go about achieving it, please?

The "code" tags on the forum are used to make it so we can see the code.

I took a quick look and it appears what you've done is define a CSS style for the body, etc, not the table itself. I think if you remove the starting CSS header it could work. Don't have time ATM to test and verify.

The tutorial Dick gave shows the code without the CSS, so don't know where that came from.

As Jack said, there's no need for a separate style declaration. Just create your table and add the background attribute to the table definition.

When you add text to the table, remember that it will be on top of the image so you'll want to choose a text color which will be visible.

The MySpace code that you're using creates a full page background so, rather than get the MySpace code, just save the background image that you want to use to your computer (right click, Save Image As), then upload it to your website image vault. Create your table and then go into source edit mode and add the background attribute per the tutorial using the image file that you uploaded. I think that will do what you want.

Thanks again, Dick.

I tried it that way on my Test Page 10 page, where I test most things out first.

I seem to have been able to insert the image into the table cell but I'm not able to click in the cell and add text. I was initially also having a problem inserting the image in the table, as every time I tried to the table itself disappeared, leaving just the background image.

I'm still not sure where I'm going wrong and would be grateful if someone at CC could take a look at my Test Page 10 and tell me what the problem is.

Mark,

You can try this. Copy/paste the following code into your test page. This assumes that you have saved the marble_1.gif file to your image vault.

<table background="/000/9/0/7/4709/userfiles/image/marble_1.gif" border="0" cellpadding="1" cellspacing="1" style="width: 500px; height: 200px"> <tbody> <tr> <td style="text-align: center;"> <p> Your text</p> </td> </tr> </tbody> </table>

You can then change the size of the table and replace the "Your text" with what you want.

Thanks for your kind help, Dick.

First attempts weren't successful. I'll try again when I'm less tired!

I can't seem to get the cursor positioned at the top left of the table to start the text I want to enter there. I can start it where you've entered 'Your text' but nowhere elses. Do I need to change some of the code you provided or could there be some other problem?

There are alternate ways to define tables depending on the goal. Having a height causes the problem you see as well as using "style". Try this instead - I used an existing background image from CC, so replace that with whatever you want to use<table background="http://www.classcreator.com/Graphics/classywood.jpg" width="600" border="1"> <tr> <td><div align="left">Text testing that expands as required. Use alignment, center, etc as desired. It's now set to left align.</div></td> </tr> </table>

Alternately, if you do want to specify the height of the table, you can use CSS text-align to control the placement of text. The following should align your text top left of the table.

<table background="/000/9/0/7/4709/userfiles/image/marble_1.gif" border="0" cellpadding="1" cellspacing="1" style="width: 500px; height: 200px"> <tbody> <tr> <td style="text-align: left; vertical-align: top"> <p> Your text</p> </td> </tr> </tbody> </table>

By the way, Jack knows a whole lot more about this stuff than I do. I just experiment with things until they seem to work.

I just experiment till I get what you want too

There are many solutions. Sometimes I try to match what the CC editor won't mess with too much