Home Help Centre Insert an image into the custom header or footer

Insert an image into the custom header or footer

Insert an image into the custom header / footer

Brightening your event page with images or graphics that mimic your existing website helps ensure the viewer that they’re purchasing tickets from the right place. Or, if you don't have a website, using a custom header image can really liven up your event page!

Are you using our new design to create or edit your events? Jump to new help or Learn more
Note

Note: Here is what you will need before you get started: 

- an Eventbrite account

- image-editing software (e.g., Adobe Photoshop, Adobe Illustrator, Snag-It or Skitch)

- an image-hosting site / account (we recommend TinyPic)

1

Create and correctly size your image

In the image editor of your choice, create an image that is 960 pixels wide, which is the width of your event page (the height of the image can vary). Here is an example (note: we've shrunk the example to fit this space):

2

Upload your image to an image-hosting site

There are many image hosting solutions to chose from. For this tutorial, we will use TinyPic. Once you have uploaded your image, you will see a number of sharing options. Highlight the URL provided for the direct link and copy the URL to your clipboard.

3

Insert your image into the custom header or footer on your event page

If you haven't done so already, check the Show custom header & footer option under Additional Options on the Edit page for your event. 

Once the Custom Header (or Custom Footer) box pops up, enter the line of code shown in the image below, pasting the URL for your image in place of the URL highlighted in blue below. Remember to put quotations before and after your pasted URL. Click on Apply, and then on Save Changes in the upper or lower right of the main Edit page.

4

Adjust the color scheme of your event page, if needed

To customize the color scheme of your event page--e.g., to match the custom header and/or footer you just inserted--go the Step 7: Add Colors on the Edit page for your event. Click the Choose your own colors tab.

To alter the color of a given element--such as the background or links--click on the colored rectangle next the name of that element. In the pop-up window, move the color-selector circle within the color field until you find the exact hue for you. Click Save, then make sure to click Save Changes in the upper or lower right of the main Edit page.

Tip

Tip: To mirror your website's color scheme on your event page, check out ColorZilla, a handy Firefox add-on.

5

Preview or view the changes you've made to your page

To see what your page looks like, click on the View or Preview button in the upper left. Voila! Your event page just got briter.

Tip

Tip: Click here to take a look at a sample event page that has an image in the custom header!

To learn about more advanced customization options that require knowledge of both HTML and CSS, check out this blog post by Anthony, one of our designers here at Eventbrite. Also, check out W3 Schools, a great resource for HTML instruction, as well as examples of CSS that you can modify and use on your event page.

Have more questions? Contact us!

Create An Event Go to my Account

Insert an image into the custom header / footer

Brightening your event page with images or graphics that mimic your existing website helps ensure the viewer that they’re purchasing tickets from the right place. Or, if you don't have a website, using a custom header image can really liven up your event page!

Note

Note: Here is what you will need before you get started:

- to have signed up for a free Eventbrite account or logged in to your existing Eventbrite account and created an event

- image-editing software (e.g., Adobe Photoshop, Adobe Illustrator, Snag-It or Skitch)

- an image-hosting site / account (we recommend TinyPic)

1

Create and correctly size your image

In the image editor of your choice, create an image that is 960 pixels wide, which is the width of your event page. (The height of the image can vary.) Here is an example (note that we've shrunk the example to fit this space):

2

Upload your image to an image-hosting site

There are many image-hosting solutions to choose from. For this tutorial, we’ll use TinyPic. Once you’ve uploaded your image, you’ll see a number of sharing options. Highlight the URL provided for the direct link and copy the URL to your clipboard.

3

Insert your image into the custom header or footer on your event page

Back in Eventbrite, go to the Preview & Customize page for your event, if you’re not already there.

(To get there, click My Events at the top of the screen, then click Edit, under Quick Links, to the right of the title of your event. Next click Preview & Customize in the upper left.)

On the Preview & Customize page, click the Add HTML link.

Once the Add HTML window opens, enter the line of code shown in the image below, pasting the URL for your image in place of the URL between the quotation marks, as shown below. Remember to put quotations before and after your pasted URL.

Note: You can edit the custom footer by clicking the Custom Footer link in the Add HTML window.

Click Save to close the Add HTML window when you’ve finished. Then click Save in the upper right of the Preview & Customize page. Well done!

4

Adjust the color scheme of your event page, if needed

To customize the color scheme of your event page—e.g., to match the custom header and/or footer you just inserted—click modify colors.

To alter the color of a given element—such as the background or links—click on the colored square next the name of that element. In the pop-up window, move the vertical-sliding bar and/or color-selector circle within the color field until you find the exact hue for you. (Or you can enter the hexadecimal value for a color in the alphanumeric field.) The preview of your event page will update automatically.

Click Save once you’ve made your color selection for an element. And then make sure to click Save in the upper right of the Preview & Customize page once you’re done!

Tip

Tip: To help you mirror your website's color scheme on your event page, check out ColorZilla, a handy Firefox add-on, which allows you to get the exact hexadecimal value for any color on any webpage.

5

Click here to take a look at a sample event page that has an image in the custom header!

To learn about more advanced customization options that require knowledge of both HTML and CSS, check out this blog post by Anthony, one of our designers here at Eventbrite. Also, check out W3 Schools, a great resource for HTML instruction, as well as examples of CSS that you can modify and use on your event page!

Have more questions? Contact us!

Can't find the answer?
Our support team is here for you!

Contact Us