• Registered: 2019-10-09
  • Posts: 8

Topic: Adding logo as Background Image [SOLVED]

I am trying to add my Logo (a JPEG with transparent background) as the Background Image.  I followed the simple instructions on the User Forum but the logo/image always comes up as an additional thumbnail/image in the gallery.  It does not appear as a Background image for the gallery.  Exactly how do I fix this?  Thanks!  Mark W.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Adding logo as Background Image [SOLVED]

If you want to have a background image for your gallery, then there are essentially two different ways to achieve this.

(1) Use Juicebox-Pro's own Background Image Options.
The backgroundUrl can be an absolute URL (in the form http://www.example.com/image.jpg) or a relative URL (relative to the web page containing the gallery's embedding code).
The easiest thing to do is simply use the background image's filename as the Background Url (set in JuiceboxBuilder-Pro's 'Customize -> Background Image' section) and then copy the image directly inside the gallery folder (after saving the gallery on the 'Publish' tab) alongside the 'config.xml' file and 'index.html' file. (Do not add the image to the gallery on the 'Images' tab as this will display the image in the gallery.)

(2) Give the Juicebox gallery a transparent background and use CSS to set a background image for your gallery's container.
Assuming your gallery's container is named 'juicebox-container' (the default name), then set the Background Color Opacity to 0 (in JuiceboxBuilder-Pro's 'Customize -> Lite' section), add the following to the <head> section of your gallery's 'index.html' page (changing the image filename as necessary) and copy the image directly inside the gallery folder alongside the 'config.xml' file and 'index.html' file.

<style type="text/css">
    #juicebox-container {
        background-image: url('image.jpg');
    }
</style>

Suggestion #1 has the advantage that the custom background image will remain when the gallery is expanded.

I hope this helps.

  • Registered: 2019-10-09
  • Posts: 8

Re: Adding logo as Background Image [SOLVED]

Thanks Steven, I will give this a try and report back if problems continue.  Mark W.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Adding logo as Background Image [SOLVED]

OK, no problem. I hope you get on OK.
Just give me a shout if you run into any difficulties and I'll do my best to help you out.

  • Registered: 2019-10-09
  • Posts: 8

Re: Adding logo as Background Image [SOLVED]

Well, I have tried procedure #1 several times and still cannot get the background image to appear.  It either does not show up at all or shows up as another image/thumbnail in the gallery. The problem may be that I am not Naming the background image accurately in the “Background Url” field.  The background file name is “compass_logo”.  The gallery name (folder) is “decker_fire_10_19”.  Exactly what should I name the background image file in the “Background Url” field?  Thanks again.  Mark W.

  • Registered: 2019-10-09
  • Posts: 8

Re: Adding logo as Background Image [SOLVED]

Whoops! i finally was able to add a background image using procedure #1, so please ignore my previous message.  Thanks  Mark W.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Adding logo as Background Image [SOLVED]

I'm glad to hear that you have been able to resolve your problem. Thank you for letting me know.

Just in case it helps anyone else reading this thread, it is important to note that the image filename should include the filename extension (e.g. "image.jpg" instead of just "image") and most web servers are case-sensitive so be sure to match uppercase and lowercase characters exactly (as "image.jpg" is not the same as "image.JPG").

I'm not sure if this was the source of your problem but it's just something that came to mind when reading your reply (two posts above this one).

In any case, I'm that that you've got things working now.