Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!


Can I add a background image to a box?

i would like to add a background image to a box; is this possible? if so, please let me know how.
Last Updated: Nov 14, 2012  |  2140 Views
Topics: Boxes, Images

Was this helpful? 3   6


Sure can! But it takes a little work. ;)

  1. Create a new box or use an existing box - any box type will work.
  2. Next, you'll need to locate the ID of that box. You can do this by hovering over the edit link in the upper right-hand corner of the box. (Need more help finding the box ID?) Jot down the number - you'll need it later.
  3. Go back to your box, and add/edit your content - whether it be text, links, RSS feeds, etc.
  4. When you are all done, click Save Changes (not Save and Close). Then select the Plain-Text Editor tab at the top of the box.
  5. Copy the code below, and paste it into the top of the box. Make sure you don't delete anything you have there already!

    #wrapboxyourboxID .innerbox {background-image:url('imageurl'); }
  6. Now, you need to make a few changes to that text you just pasted. Replace yourboxID with the number you wrote downin step #2. Then, replace imageurl with the URL for your background image.
  7. Click Save & Close!

Tips & Tricks:

  • If you have photo editing software available to you, you may wish to increase the transparency of your image so that the text is more readable.
  • You can also create a semi-transparent image to use as the background of your text (see our December Newsletter for an example).
Answered by Anna BurkeBookmark and Share

Other Answers / Comments (2)

  1. This was really helpful. I have done this on a number of our pages now, and will definitely be using this feature again.
    by Deborah Brown on Jul 10, 2013.
  2. Just used this feature and it worked great. I am sure i will be using this in more often.
    by Sujata on Feb 22, 2015.

Need Help?

This site contains FAQs for LibGuides v1 only.

LibGuides v2 Documentation
(You must have a LibApps account to access that site.)

Or click HELP in the orange command bar of your v2 system.


Follow LibGuidesFAQ on Twitter Follow us on Twitter!
 Your questions, answered!

Browse by Popular Topics

Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  
View All Topics

Related content from Springshare v1 Help