Images as Backgrounds

This page gives instructions for how to have an image as a background for a portion of your page, similar to the example below. Other examples of how this has been used can be found in the headers here and here.

Add Text over your background image

Add pictures or buttons

The above image is created using a Table within a Table. The background image is set into the first table.

Insert a table 1x1 into your site. Use the HTML to set the width of your table in the only <td> field you will have.

eg: Turn this <td> into this <td style="width:1000px">

You need to ensure the image you are going to use as your background is the exact size you want it to be before you upload it. Upload your image to you site. You can do this via Manage Site, Attachments, Upload. Your image will appear on the top.

Right click on the "view" button and select "Copy Link Address".

Go back to your page with your 1x1 table cell. In the HTML after the <table add the words background="paste link"

eg:

<table background="https://sites.google.com/a/ptengland.school.nz/htmlexamples/20160122_163316%20%281%29.jpg?attredirects=0"

You need to also stipulate the height of your picture using height="450px" (use the height size of your picture here)

The full line of HTML code will look similar to this when your background image is in place (the two pieces of code you are putting in are in blue:

When your background image is in place you can use the "insert table" function to put another table inside this table. Make sure you cursor is inside your first table before you add the second table. You can use blank lines to force your second table further down before inserting the second table. Your second table can be centred, widened etc as you would normally do. And will appear over the top of your first table containing the background image.

Page updated

Report abuse