Is there a way to have two different juicebox layouts on the same website?
Yes. Please see the Embedding Multiple Galleries support section for details on embedding multiple galleries on separate HTML pages or on one HTML page. (Each gallery can have a unique layout.)
Is there a way to add the juicebox gallery in to a CSS background div?
You would just need to embed a gallery into a web page as normal (following the instructions here) and overlay whatever content you like on top of the gallery using CSS (to position the custom content and stack it on top of the gallery using a high enough z-index).
Please note that Juicebox was not designed with this in mind so you might run into problems that need to be tackled as you encounter them.
However, something like the following might work. To see it in action, create a sample gallery with JuiceboxBuilder-Pro (just add a few images, don't worry about the configuration options) and use the following as the gallery's 'index.html' file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
#wrap {
position: relative;
}
#juicebox-container {
position: absolute;
top: 10px;
left: 10px;
}
#overlay {
position: absolute;
top: 10px;
left: 10px;
width: 600px;
height: 400px;
z-index: 9999;
color: #ff0000;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '600',
galleryHeight: '400',
autoPlayOnLoad: 'TRUE',
buttonBarPosition: 'NONE',
enableLooping: 'TRUE',
screenMode: 'LARGE',
showAutoPlayStatus: 'FALSE',
showImageNav: 'NEVER',
showImageOverlay: 'NEVER',
showThumbsOnLoad: 'FALSE'
});
</script>
<div id="wrap">
<div id="juicebox-container"></div>
<div id="overlay">Custom content goes here.</div>
</div>
<!--END JUICEBOX EMBED-->
</body>
</html>