How can we help?

[t] Can I set a background image for a table or on an "On Page Text" block?

Follow

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.

 

Examples:

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

 

Additional Resources

CSS background properties

http://www.w3schools.com/css/css_background.asp

background image repeat

http://www.w3schools.com/cssref/pr_background-repeat.asp

background image position

http://www.w3schools.com/cssref/pr_background-position.asp

 

Powered by Zendesk