New background photo on every refresh

Note: This customisation has been obsoleted by the new SmugMug "background" tab in the customiser, and doesn't need to be used any more.

This customisation gives you the ability to display a random background image on your site which will change each time the page is loaded. You just need to enter a link to the gallery to pick photos from into the form below, and code will be generated for you to display any of the images in that gallery at random.

Notes

The largest available size for your images will be used for the background.

If the source gallery contains more than 62 photos, the generated CSS code for the background will be pretty large. For example with 300 photos, the resulting CSS was about 300kB uncompressed. After SmugMug optimised the code, the size was reduced to 14kB, so it should still download quickly.

If your source gallery has more than 3844 photos in it, the remainder will be ignored.

Finally, if you add or change the photos in your gallery after generating the code, you will need to regenerate the code in order to show those changes (since it remembers the list of the photos that were originally there and so doesn't notice updates automatically).

Example

Please check out the example page, and see what happens when you refresh the page!

Installation

First, add this code to your Theme's CSS:

.ss-random-background {
	background-position: center center;
	background-size: cover;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.sm-page-edit .ss-random-background {
	position: static;
}
.sm-page-edit .ss-random-background:after {
	content: "Random background image by http://www.sherlockphotography.org/";
	padding: 1.5em;
	display: block;
	background-color: rgba(0,0,0,0.4);
	color: #bbb;
	font-size: 115%;
}

Now, on the page that will display the random background, add an HTML block to the page. Then use the generator below to create the HTML and CSS code for that block.