Skip to main content
E
English100
Inspiring
July 26, 2017
Answered

Table Background Image

  • July 26, 2017
  • 1 reply
  • 1283 views

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.

<table width="80%" border="1" align="center" cellpadding="0" >

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

This topic has been closed for replies.
Correct answer osgood_

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.

<td height="87" align="left" style="background-image: url('paper.png'); ">

1 reply

O
osgood_Correct answer
Legend
July 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.

<td height="87" align="left" style="background-image: url('paper.png'); ">

E
English100Author
Inspiring
July 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

E
English100Author
Inspiring
July 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>

<meta charset="UTF-8">

<title>Paper</title>

<style>

.paper-holder {

position: relative;

width: 70%;

margin: 0 auto;

padding: 50px;

background-image: url('paper-bg.png');

background-repeat: repeat;

}

.paper-curl {

position: absolute;

bottom: 0;

right: 0;

z-index: 1;

}

.content {

position: relative;

z-index: 2;

}

</style>

</head>

<body>

<div class="paper-holder">

<div class="paper-curl"><img src="paper-curl.jpg" alt="" /></div>

<div class="content">

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

<!-- end content -->

</div>

<!-- end paper-holder -->

</body>

</html>


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-image: url('paper-bg.png');

background-repeat: repeat;

}

.paper td {

padding: 0 40px;

}

.paper-curl {

background-image: url('paper-curl.png');

position: absolute;

bottom: 0;

right: 0;

z-index: 1;

}

.content {

position: relative;

z-index: 2;

}

<table width="80%" border="1" align="center" cellpadding="10" >

        <div class="paper-holder">

        <div class="paper-curl"><img src="paper-curl.png" alt="" /></div>

        <div class="content">

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

<!-- end content -->

</div>

<!-- end paper-holder -->

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices