Table Background Image

Report · Jul 26, 2017

I write stories and use DW to create an HTML file which I then upload to a website. I have a standard template with a table and several cells. The main cell is where I paste the story. I am writing a story that contains diary entries as well as dialog. I want to differentiate the diary entries by having the background look like paper. I can insert a one cell table inside the main cell and inside that I add the diary entry. I can't seem to make the background of that cell look like paper. I know I have to use the

<table background="paper.png"> code and I have a .PNG image of the paper I want to use but I don't know where the <table background="paper.png"> code should go.

Any help will be appreciated.

Alan

This is the relative code for the first diary entry.

<tbody>

<tr>

<td height="87" align="left" ><p class="stylechapter">Tuesday June 22nd</p>

<p>I was sitting on my rear deck with a book in my lap, taking a mid-afternoon nap after a good workout cutting my lawn and cleaning my swimming pool. The novel was the new one from Paula Hawkins who had her first novel 'A Girl On The Train' go to the top of the New York Times' Best Seller list and be made into a movie starring the English actress Emily Blunt. The new book was titled 'Into The Water'. Like her previous novel, this one needed constant attention to follow the plot and keep track of the many characters.</p></td>

</tr>

</tbody>

</table>

Report · Jul 26, 2017

This assumes your paper.png graphic is sitting in your site folder. I would also remove the height="87" as the content will set the height naturally.

Report · Jul 26, 2017

Osgood

That worked, thanks.

Alan

Report · Jul 26, 2017

Osgood

I have one more question. I found an image of paper with the bottom right curled up slightly as if someone was about to turn the page. I used it but the curl appears four times. How do I code it such that the curl only appears once at the bottom right?
Thanks
Alan

Edit

Okay added background-repeat: no-repeat; but it is not wide enough to fill the width of the cell. If I add a background-size at 100%, it fills the width of the cell but I lose the curl. See ScreenShot

Report · Jul 26, 2017

I typically put backgrounds on parent containers. In your case, it would be the entire <table> or your <body> tag.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 26, 2017

Nancy

Not sure what parent containers are, but I have cells in the main table with different background colors and text such as my pen name, the story title, story synopsis, etc as it's the template for my story. I only want this one cell within the table to have a different background to identify that it's a diary entry. I've tried different code but I still lose part of the image - the curl. I'm sure there's a way of fixing it but my knowledge of HTML code is very limited. Or maybe I'm asking too much.

Thanks

Alan

Report · Jul 26, 2017

You can fill the container you are adding the background-image to by using the background-size css property...

CSS3 background-size property

Report · Jul 26, 2017

First find a bit of paper that can be repeated and has a curl on its edge. Cut out a small square of the paper in an image editing tool. Use that for the 'paper-bg.png' image. Next cut the curl out and insert it into the 'paper-curl' <div>

Example - use your own images..

<!DOCTYPE html>

<html>

<head>

<title>Paper</title>

<style>

.paper-holder {

position: relative;

width: 70%;

margin: 0 auto;

padding: 50px;

background-repeat: repeat;

}

.paper-curl {

position: absolute;

bottom: 0;

right: 0;

z-index: 1;

}

.content {

position: relative;

z-index: 2;

}

</style>

</head>

<body>

<p class="stylechapter">Tuesday June 22nd</p>

<p>I was sitting on my rear deck with a book in my lap, taking a mid-afternoon nap after a good workout cutting my lawn and cleaning my swimming pool. The novel was the new one from Paula Hawkins who had her first novel 'A Girl On The Train' go to the top of the New York Times' Best Seller list and be made into a movie starring the English actress Emily Blunt. The new book was titled 'Into The Water'. Like her previous novel, this one needed constant attention to follow the plot and keep track of the many characters.</p>

</div>

</div>

</body>

</html>

Report · Jul 26, 2017

osgood

Not sure if I'm putting the code in the right place and with the correct syntax as it's not displaying anything.

Thanks

Alan

This is what I did (I have two .PNG files - paper-bg.png (the main area) and paper-curl.png:

<title>Paper</title>

<style>

.paper-holder {

position: relative;

width: 70%;

margin: 0 auto;

padding: 50px;

background-repeat: repeat;

}

.paper td {

padding: 0 40px;

}

.paper-curl {

position: absolute;

bottom: 0;

right: 0;

z-index: 1;

}

.content {

position: relative;

z-index: 2;

}

<p class="stylechapter">Tuesday June 22nd</p>

<p>I was sitting on my rear deck with a book in my lap, taking a mid-afternoon nap after a good workout cutting my lawn and cleaning my swimming pool. The novel was the new one from Paula Hawkins who had her first novel 'A Girl On The Train' go to the top of the New York Times' Best Seller list and be made into a movie starring the English actress Emily Blunt. The new book was titled 'Into The Water'. Like her previous novel, this one needed constant attention to follow the plot and keep track of the many characters.</p>

</div>

</div>

Report · Jul 26, 2017

Should work if your image names are correct. Try the below code - copy and paste into a new Dreamweaver file and save it to your site folder as test.html. As long as you have 2 images sitting in your site folder named paper.png and paper-curl.png they should show up.

<!DOCTYPE html>

<html>

<head>

<title>Paper</title>

<style>

.paper-holder {

position: relative;

width: 70%;

margin: 0 auto;

padding: 50px;

background-repeat: repeat;

}

.paper-curl {

position: absolute;

bottom: 0;

right: 0;

z-index: 1;

}

.content {

position: relative;

z-index: 2;

}

</style>

</head>

<body>

<p class="stylechapter">Tuesday June 22nd</p>

<p>I was sitting on my rear deck with a book in my lap, taking a mid-afternoon nap after a good workout cutting my lawn and cleaning my swimming pool. The novel was the new one from Paula Hawkins who had her first novel 'A Girl On The Train' go to the top of the New York Times' Best Seller list and be made into a movie starring the English actress Emily Blunt. The new book was titled 'Into The Water'. Like her previous novel, this one needed constant attention to follow the plot and keep track of the many characters.</p>

</div>

</div>

</body>

</html>

Report · Jul 26, 2017

osgood

This was the result. I didn't see any code for the paper-bg.png in the div class where paper-curl.png resides.

Alan

If I add the code for paper-bg.png I get this:

Seems like the location and repeats are not correct.

Alan

Report · Jul 26, 2017

English100 wrote
osgood
This was the result. I didn't see any code for the paper-bg.png in the div class where paper-curl.png resides.
Alan
If I add the code for paper-bg.png I get this:
Seems like the location and repeats are not correct.
Alan

It doesnt look like you are using the code I provided. Please use exactly the code I provided in my last post, its been tried and tested. Just guessing is not going to get you anywhere if you have no knowledge of html/css and I cannot help unless you can follow some simple instructions.

Please post the page online and provide a link to it, if you can, so we can see exactly what you have done and how to resolve the issue.

Report · Jul 27, 2017

osgood

It seems as if this is outside my realm of ability so I'm sticking with a plain paper background with no curl

Thanks for your help

Alan

Report · Jul 27, 2017

English100 wrote
osgood
It seems as if this is outside my realm of ability so I'm sticking with a plain paper background with no curl
Thanks for your help
Alan

Ok, no problem. You could have done it with a little more help and persistance.

Table Background Image

1 Correct answer