This is the "Home" page of the "Visual Effects: How to put an image in the background of LibGuides" guide.
Alternate Page for Screenreader Users
Skip to Page Navigation
Skip to Page Content

Visual Effects: How to put an image in the background of LibGuides  

Last Updated: Aug 31, 2011 URL: http://guides.lib.fsu.edu/centercolumncolor Print Guide RSS UpdatesEmail Alerts
Home Print Page
  Search: 
 
 

How to put an image in the center background on LibGuides

This guide will tell you how to add a tiled image in the large central area behind the LibGuide content. Be careful when using this, to select a picture with light colors and one that is not too busy, so that people will be able to read the headings and links at the very top of the guide.  For the background in this demo, I have used a photo of the surface of the sun by Philipp Salzgeber.

 

1. In order to add an image to the side panels of the screen, you must be logged into LibGuides, and must be the primary owner of the guide.  (Co-owners cannot do this.)  To see who the owner of a Guide is:  click "My Admin" in the top right corner of a guide, click the tab for "Guide Index", in the drop-down menu for "Guide Owner" select "All Guides by All Users", locate the guide in the Guide Index, and look in the column for "Owner".  The name that appears there is the only person who can add this effect to a guide.

2.  In the top left corner of the screen in the yellow bar, click the link to Guide Look & Feel.

3.  In the drop down menu, click "Custom JS/CSS Code".

An image of the menu to select "Custom JS/CSS Code".

4. Cut and paste the following piece of code into the box.

Code:

<style type="text/css">
#container {background-image:url('http://www.salzgeber.at/astro/pics/20110213_sun/20110213_sun_detail.jpg');  background-repeat: repeat;}
</style>

 

5.  Type in the code, and replace the URL (text appears in red in these instructions) with the URL for the image you want to use.  Be careful to delete only the URL.  You must leave in place the quote marks and parenthesis around the URL.

6.  Click "save".

7.  If the image you want to use does not appear in the side columns, then start back at step 2 and refollow the directions in case something was accidentally skipped.  If you cannot get your image to appear, and are stuck, then contact the webmaster Matt Burrell (mdburrell@fsu.edu) for assistance.

Description

Loading  Loading...

Tip