Click Here to view/download this article as a PDF.
Author: Joel Kristenson
Last Updated: 2015-11-03
Overview
This article will show you how to add a full page background image to an Event using inline CSS and your System Gallery (to host the image file on our server).
Outline
#1 Upload your Image to your System Gallery, and Publish it to the Web
#2 Enter Inline CSS for your Background Image into the Event Description and Test It
#3 Related Resources
#1 Upload your Image to your System Gallery, and Publish it to the Web
Tip: Click here to read a detailed article on uploading an image to your System Gallery.
Navigate to the Events list.
Search for the event you want to add a background image for OR create a new event. In this example I searched for an event that was already created in by database, and published to the web, called “Theater Event – Come to the Show!”.
Navigate to the Gallery tab, and click [Import System Gallery]. Alternately you could click the [Import File] button if you wanted to just store the image in the single event record vs the system wide Gallery.
Select the Images folder and then click [Import File] button in the upper-left.
Locate the image file on your machine, and click [Open].
Once the file is uploaded, right-click it, and select ‘Publish to Web’.
This message will display once the image is published on the web (hosted on Trail Blazer’s servers), click [OK] to proceed.
Right-click the image a second time, and select ‘Get URL…’.
This will display a window with the images dimensions. Click the [Copy URL to Clipboard] button.
Once the URL is copied to the clipboard, highlight the image, and click [OK] if you would like to store the image in the event record itself. Otherwise click [Cancel] to return back to the event record.
The image(s) will be stored under the Gallery tab, with relevant details below.
That completes the steps necessary to upload the image, and host in on our server. The next section will show you how to insert the URL of the image into your Event’s Description box.
Tip: If you don’t plan on moving to section #2 right away, you can save the image URL in a text editing file for future use.
#2 Enter Inline CSS for your Background Image into the Event Description and Test It
Follow Application Menu > Calendar/Tasks > Events and open the event record that you’re going to add a background image for. In this example I opened a previously created event called “Theater Event – Come to the Show!”.
In the Description section of the event record paste in the following code, (make sure the code in red is replaced with the URL string copied in the previous steps):
<style>
body {
background-image: url("Image Source URL Goes Here e.g. http://trailblz.info/YourDatabaseName/images/2015-11-02-event-background-image.jpg");
}
</style>
Click [Save] once you’re finished. My example event description is below.
Click the [View Page] button at the top of the event record to test that the background image displays as desired.
Your event online will now look something like this:
To view a live preview of my mock event Click Here. The full code used for this example is below. Feel free to use it as a starting point, swap out the code in red with your own image source URL:
/*SAMPLE INLINE CSS FOR ABOVE EVENT – START*/
<style>
body {
background-image: url("http://www.trailblz.info/DemoNonprofit_Joel/doc/MwA1ADYAOAA1ADgAMQAxADYALQAxADAAMAA4ADMA0/2015-10-30-full-page-background-theater-image.jpg");
}
#event-top-banner {
color: black;
background-color: white;
}
</style>
<p>Description goes here...<br /><br /><img src="http://www.trailblz.info/DemoNonprofit_Joel/doc/NQA2ADgAOAAzADgAMQAtADEAMAAwADUANQA1/TheVenue.SeatingChart-400px-width_201508121252245962457_Temporary.jpg" /></p>
/*SAMPLE INLINE CSS FOR ABOVE EVENT – END*/
*Always use your own work/images to avoid copyright infringement, and feel free to call our support team for any assistance setting up and managing your events in Trail Blazer.
This concludes the steps, the related resources below link to variety of other event related articles and videos.
#3 Related Resources
Article: How to Style your Event Pages – 4 Example Mock Events – Sample CSS Code with Descriptions
Article: How to Upload an Image to your System Gallery
Article: Events 2013 | How to Create an Event with Tickets and Merchandise
Article: Events 2014 – Part I
Article: Events 2014 – Part II
Article: Purchase Orders
Video: Events 2013
3rd Party Tool: Gimp – Free Photo Editor
3rd Party Learning Resource: w3schools – Inline CSS
Trail Blazer Live Support
Phone: 1-866-909-8700
Email: support@trailblz.com
Facebook: https://www.facebook.com/pages/Trail-Blazer-Software/64872951180
Twitter: https://twitter.com/trailblazersoft
* As a policy we require that you have taken our intro training class before calling or emailing our live support team.
Click here to view our calendar for upcoming classes and events. Feel free to sign up other members on your team for the same training.
* After registering you’ll receive a confirmation email with the instructions for how to log into the GoToMeeting session where we host our live interactive trainings.
* This service is included in your contract.
