User Controlled Full Page Backgrounds

Would you believe that there is a CMS that lets your user apply a background on a per page basis?
Not only that.  It can scale to fit the browser window.

Pretty shiny huh?

The SiteCM header image control lets your client select an image to use in a predefined area on a per page basis. It has a default value so that if you don't select an image it will fall back to your default.  It also has a 'use parent' value so that all of the child pages will inherit their parents background or header image. In the past this has strictly been used for banner type images in the header (hence the name).

Thanks to CSS Tricks and their bullet proof full page backgrounds. I've amped up this usage to user controlled scalable backgrounds. I've used it in several pages with a minor adjustment for IE6 works like a charm in all browsers.

On page code:

<span class="HeaderImage"><SiteCM:Headerimage id="Headerimage1" runat="server" CategoryID="13881"></SiteCM:HeaderImage></span>

This would go likely in your header file first thing even before your container div.

And the CSS from CSS Tricks slightly tweaked:

.HeaderImage img{      /* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
.HeaderImage img {
left: 50%;
margin-left: -512px;   /* 50% */
}
}

And that is it. Ooooh ... Ahhh.... give it a try and if you get stuck let me know and I'd be happy to give you a hand. You can see it in action here: Natural Balance Homes and in our SiteCM testing Grounds

Up next..user controlled rotating background images....yes SiteCM can do it.