Make sure that the opacity for the backgroundColor is 0 and your gallery's background should be transparent, for example:

backgroundColor: 'rgba(0,0,0,0)',

If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
Thank you.

Just upload your complete gallery folder to your web server and link to the 'index.html' file within the gallery folder.
For example, if your gallery folder is named 'my_gallery' and you upload your complete gallery folder to your root directory, then you could use a link such as the following to open the gallery's web page:

<a href="/my_gallery/index.html">Click here to open gallery.</a>

You can use the Back Button within your gallery to allow users to return to a page within your web site (such as your home page).
Just set backButtonPosition to something other than NONE (either TOP or OVERLAY) and set the backButtonUrl to the URL of whatever web page you want the Back Button to link to.
Full details of all Back Button configuration options can be found here.

The position of the gallery on your web page is entirely dependent on the code that you use on your page.
If the gallery is the only element on the page, it will be displayed relative to the top-left corner (just like any other <div> container would be).
Please post the URL to your web page so that I can take a look. Thank you.

Maybe there is another <div> that is causing your gallery to be pushed down the page.
If so, then you could try using a CSS float or display: inline-block;.
Try one of the following. (Without seeing your web page I do not know if this will help.)

<div id="juicebox-container" style="float: left;"></div>
<div id="juicebox-container" style="float: right;"></div>
<div id="juicebox-container" style="display: inline-block;"></div>

You can set screenMode="SMALL" (in JuiceboxBuilder-Pro's 'Customize -> General' section) to force the gallery to be displayed in Small Screen Mode in all browsers and on all devices.
However, it sounds like you might want to try embedding the gallery in your page and, rather than just using a text link as I suggested above, set showSplashPage="ALWAYS". This will display the Splash Page which is like a large image link for your gallery. When the Splash Page is clicked, the gallery will open fullscreen. When the user clicks the 'Close Gallery' button on the Button Bar, the user will return to the original page with the Splash Page.
More information about Screen Modes and the Splash Page can be found here.

Thank you for posting the URL to your gallery's web page.
I see the space above your gallery that you are referring to.

There are three things that you can do to reduce the space.

(1) Set buttonBarPosition to OVERLAY or OVERLAY_IMAGE. At the moment, it is set to TOP. This reserves a 'top' area above the image area (and places the Button Bar in it) whose height is determined by topAreaHeight (default value 50px). If no gallery elements are positioned TOP, then the 'top' area will not be used.
buttonBarPosition can be found in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section.
topAreaHeight can be found in JuiceboxBuilder-Pro's 'Customize -> General' section.

(2) There are <p> and <br /> tags scattered throughout your gallery's embedding code which are introducing empty space and line breaks above your gallery.
It looks like these are being inserted by WordPress's wpautop function.
You could either install a third-party plugin to disable the wpautop functionality, for example:
https://wordpress.org/plugins/toggle-wpautop/
https://wordpress.org/plugins/wpautop-control/
... or you could implement the manual solution from this forum thread:
http://stackoverflow.com/questions/6625 … ress-posts
Please note that you may need to re-enter your gallery's embedding code into your post (or manually remove the tags from the editor) after disabling wpautop (which should prevent the tags from being inserted in subsequent posts).

(3) This FAQ may also help:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

There are still <p> and <br /> tags throughout your gallery's embedding code and this is the cause of the problem.
They are more than likely to have been added by WordPress's wpautop function and you'll need to remove them to remove the space above your gallery.

I'm not sure what you mean by "added the wpautop function". You need to disable the function rather than add it.
Even if you have disabled it, the tags may still be present in the body of the post (having been inserted prior to disabling the function) and you might need to remove them manually. Check the embedding code in the body of your post to see if they are still there and delete them if they are.

If you have used one of the wpautop plugins, perhaps you could try another. There are several that you could try.

If you continue to experience difficulties, then I would be happy to help further but it would help if I had access to your web server and WordPress installation. If you are agreeable to this, then please let me know and I will send you an email address where you can forward your login details to me.

No problem. Please check your email. I have sent you a message.
Thank you.