HTML table background image

How to add background image to HTML page body elements and tables with repeat and size


We can create attractive headers like modern web design sites using background images. We will use one simple image to create one header like this below. To create one image like this please visit our gradient tutorial in our graphics section.

This is our text over the header
<table width='100%' border='0' cellspacing='1' cellpadding='0' background='images/bg1.jpg'>
<tr><td >This is our text over the header</td></tr>
</table>

Adding Background image to table data cell

This is our text over the header

<table width='100%' border='0' cellspacing='1' cellpadding='0'>
<tr><td background='images/bg1.jpg'>This is our text over the header</td></tr>
</table>
In above script we have added background image directly. We can also use style sheet to display images inside table

Using Style

Globally ( for the page ) we can declare style of the table like this.
table { background: url("https://www.plus2net.com/images/top2.jpg") no-repeat; }
All tables of the page will follow this property and all will use the same image as background image.
By adding class to it we can define another style to some other tables.
table.t1 { background: url("images/bg1.jpg") repeat;}
We will add the above code to head section of the page and display two tables with this.
demo of Table background image with CSS
Here is the script of the above demo
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of table background image</title>
<style type="text/css">
table { background: url("https://www.plus2net.com/images/top2.jpg") no-repeat; }
table.t1 { background: url("images/bg1.jpg") repeat;}

</style>
</head>

<body>
<table>
<tr><td>Cell 1 </td><td>Cell 2 </td><td>Cell 3 </td><td>Cell 4 </td></tr>
<tr><td>Cell 1 </td><td>Cell 2 </td><td>Cell 4 </td><td>Cell 4 </td></tr>
</table>
<br><br>
<table class="t1">
<tr><td>Cell 1 </td><td>Cell 2 </td><td>Cell 3 </td><td>Cell 4 </td></tr>
<tr><td>Cell 1 </td><td>Cell 2 </td><td>Cell 4 </td><td>Cell 4 </td></tr>
</table>
</body>
</html>
Table Table Heading Cell
HTML Page Structure

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    andy

    07-12-2014

    How can I put different tiling images into a table? I have a 9x9 table, and I want to use the 8 edge cells as the border. I have the corner images sorted (20x20pix), and i have 4 seperate images (20x1 and 1x20) that i need them to extend along the edges. The horizontal ones work, but not the vertical ones. Im using Dreamweaver and CSS. Any suggestions? Thanks

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2022 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer