Resize 1 background image for multiple div containers on a page

I have this one super fancy background image that needs to scale into being the background for 3 boxes on one page, 100% height/width. Is this possible?

NOT 1 background scaling to be the whole page background.

But

| Box 1 (50x50) gets background| | Box 2 (20x20) gets background | etc.

I'd like to assign class "background" to all of these divs, and have 1 background image used that scales based on the dimensions of the div. Its a square, and its o开发者_运维知识库k if it looks slightly distorted

FYI - this is a panels page drupal layout.

I don't know your browser restrictions but there is a CSS3 property called background-size. You would simply set this to background-size: 100% 100%.

.background img {
    height: 100%;
    width: auto;
}

This will make the image tretch to fit div's height @ 100% height & scale naturally with width:auto.