Multiple scalable background images

Recently I had a design provided that required a scalable image either side of the content area when the screen was wider then a specif point.
Since it has been a long time since my last blog post, I thought I would share my solution.

The image needed to scale so that width wise it fitted on screen and scaled up to a maximum size.
Afetr that maximum size the image no longer scales and just sits either side of the content.
Since this was an existing site and markup changes were going to be problematic I decide to go with multiple background images on the body and make use of calc for positioning and sizing.

The content area max-width was 800px and the image looked best between 100px and 400px wide.
We don't want the images to show when the screen size is less then 1000px and it should stop scaling after the screen size exceeds 2000px.

Here's the code breakdown.

/* If the screen is larger then 1000px add the two background images*/
@media screen and (min-width:1000px) {
	body{
	   /* add the 2 images and position them far left and right */ 
	   background: url('background.png') left 0px, url('background.png') right 0px;
	   background-color: #004b88;
	   background-repeat: no-repeat;
	   background-attachment: fixed;
	   background-size: 100px auto; /* safe default for browsers that don't support calc. */
	   background-size: calc( 50% - 400px ) auto; /* Scale the image (screen width - content) / 2 */
	}
}
 
/* if the screen is larger then 1800px stop scaling the image and position it near the content edges. */
@media screen and (min-width:1800px) {
   body{
     background-size: 400px auto;
     /* First image position 50% of screen - 1/2  content width + image width */
     /* Second image position 50% of screen + 1/2 content width  */
     background-position: calc( 50% - 800px ) 0px, calc( 50% + 400px ) 0px;
    }
}

So this worked fine in all the modern browsers I tested. Older browsers that don't support calc will just ignore it and use the defaults. Unfortunately IE9 trys to support calc, but crashes when used with background-position. Where I work IE9 is part of the standard desktop environment and there is nothing I can do about it. Well personally I can do something for myself, I just can't get the desktop environment changed for everyone else. So I need to support IE9. I looked at hacks as a solution and finally decided on vendor prefixes for browsers other then IE. IE will just not get the image positioned next to the content, no biggie, it will just sit far left and right.

@media screen and (min-width:1800px) {
   body{
     background-size: 400px auto;
     background-position: -moz-calc( 50% - 800px ) 0px, -moz-calc( 50% + 400px ) 0px;
     background-position: -webkit-calc( 50% - 800px ) 0px, -webkit-calc( 50% + 400px ) 0px;
    }
} 

See also:

• Multiple Background
• Calc