Table background image

This Page's Contents

Exercise

For this exercise you are going to insert a background image into the centre cell of a 9 (3x3) cell table. The size of the table & cell you use may be altered to suit your purpose. The steps are the same.

1. Insert your 3 x3 cell table
2. Save the HTML file with a suitable name. Note this is a very important step. Your HTML editor then knows where the HTML file is located & can make relative links with other files such as your image and CSS file which we will use in the Dreamweaver version.
3. Copy your image into the same folder as your HTML file

How to do it in Kompozer

Image size - width & height

3 options, the first 2 being the most suitable

• Create the correct size image in a graphic package
• Image smaller than the Table or Table cell, options to position the image and/or have a single image or to tile the image
• Image smaller than the Table or Table cell, options to position the image. the excess will be cropped - not visible

Inserting background image

• Select HTML Tags (Bottom right of Window)
• Press ctrl key and click the required table or Cell (marked TD)
• On the Status bar (extreme bottom of window). Right click the highlighted tag it will be either <table> or <td> depending on what you previously selected.
• Select inline styles
• Select Background tab
• Select a suitable background colour (always recommended - the image will be above this)
• Click Choose file
• Double click your image or Select your image and click Open
• Check out the other properties you may like to use
  • Opacity
  • Tile - how the image appears if smaller that the Table cell
  • Scrolling with page
  • Position
• Click OK
• Note the background image will not show in HTML Tags mode
• Click Normal

HTML Example CSS inline style

<td style="vertical-align: middle; background-image: url(l-web-design01.gif); background-color: white; width: 273px; height: 235px; text-align: center;"><span style="font-weight: bold;">This cell contains a tiled background image with text displaying above the image. Note how text may not display well over an image</span></td>

View Finished table

Table cell with background image

The colour of the image should be suitable if you wish to display text above it.

The above example shows readability problems that should be avoided.

John M.

How to do it in Dreamweaver

Create a Class

• Create a new class which I will call background-image1
• Open the CSS Styles panel (Shift+F11) if it isn’t already open.
• Click the New CSS Rule icon, white file icon with a + sign, locate at the bottom of the panel
• In the Selector type box select Class (can apply to any HTML Element)
• In the Selector name box Enter the name background-image1
• In the Rule definition box
• Select
  • the name of an existing style sheet
  • OR Click (New Style Sheet File)
    • In the Save Style Sheet File As Window
    • Check that the Save in box has the correct folder to save in.
    • In the filename box enter a suitable name say mystyles
    • ensure that the type in the box below is Style Sheet Files (*.css)
    • in URL it should have ./
    • in Relative to box should be Document
    • Click Save
• CSS Rule Definition for ......additional information
  • Click Background
  • Select a suitable background colour as a backup
  • Browse to your image
  • Double click the image file
  • Click OK

Your CSS class has now been set up and can be applied to any HTML element.

A link should have appeared in your head section looking like this

<link href="mystyles.css" rel="stylesheet" type="text/css">

This link allows the styles in the mystyles.css file to be used in your HTML file

Applying a Class to an element

In this exercise you are going to set it to the centre cell in the Table

• Click in the centre Table cell
• In the Properties Panel
• Ensure the HTML button is selected
• in the Class box select the class, background-image1, you have just created
• Your background image appears

Background Image

	Text may be hard to read over a background image if the image is not suitable

Note how the text, 'Text may be hard to read over a background image if the image is not suitable' is difficult to read.

Background images needs to be selected with care