We’ve Moved

Please update your bookmarks. Support for PowerSchool Learning has moved to the new PowerSchool Community. Visit the PowerSchool Community to find answers in our knowledge base and participate in discussions.

 

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