Trail Blazer Knowledge Base

 

Home : Events : Add a Background Image to an Event

Knowledge Base







User:

Password:



Article ID: KB250
Keyword Name: Inline CSS, HTML, Upload, Styling, Background Image, Event, Description
Created: November 03, 2015
Viewed: 21784

Add a Background Image to an Event






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



http://www.us-cert.gov/sites/default/files/images/tip-icon.png 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 eventIn 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.



http://www.us-cert.gov/sites/default/files/images/tip-icon.png 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

http://sisyphus-js.herokuapp.com/assets/email_icon-0f32f4da45c2822cbb02fb36f9b9429e.png   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.



 

Are you ready to learn more? Contact Us