Q. Can I set a background image for a table or on an "On Page Text" block?
A. Yes, using CSS background you can insert a background image within an "On Page Text" block. As always, whenever linking to an image it is imperative that you have permission to use the image.
Note: This will take some CSS finagling on your end to get the desired look and the image has to be taken from a URL on the web.
As you can see from the image below, I am able to set a background image for a page, a table and a cell within a table. Below I will demonstrate the steps necessary to insert a background image. At the end of this article I also provide the source for the three background images below as well as resources.
1. Click on the Source button from the CK Editor.
2. Ensure all source is between a <div> and </div> tag, if it is not already. In the image below I included the background image information within the <div> tab.
3. Insert the background image source within any of the tags such as the <div>, <table>, or <td> tag.
4. Click the Source button to see if what you have done yields the desired results. The Source button is a toggle button which allows you to seamlessly change between views.
5. Finally, click the Save button.
Note: When making many changes, I like to save often to ensure the changes are not lost.
Listed below are examples I used in the original image at the top of the article.
The example below is for a page background or watermark. The image is 25% of the original size. It is not repeated and it positioned in the bottom right of the page.
<div style="background-image:url('your_image_URL'); background-size: 25%; background-repeat:no-repeat; background-position:right bottom;">
In this example I inserted a background image into a table. Again the image is 50% of the original size and is not repeated. In this case I did not specify the background-position so the image is positioned in the top left corner.
<table border="1" cellpadding="1" cellspacing="1" style="background-image:url('your_image_URL'); background-size: 50%; background-repeat:no-repeat; ">
In this final example, I inserted a background image into a table cell. The image is 35% of the original size. It is not repeated and it positioned center of the cell.
<td style="background-image:url('your_image_URL'); background-size: 35%; background-repeat:no-repeat; background-position:center;">
CSS background properties
background image repeat
background image position