Resize 1 background image for multiple div containers on a page

Question

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 ok if it looks slightly distorted

FYI - this is a panels page drupal layout.

possible duplicate http://stackoverflow.com/questions/376253/stretch-and-scale-css-background. In short only via CSS 3 but that link provides a workaround that might work for you as well — subhaze, Dec 23 '10 at 19:35

score 2 · Accepted Answer · answered Dec 23 '10 at 19:36

2

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%.

answered Dec 23 '10 at 19:36

Josiah Ruddell

29,697
8
65
67

score 0 · Answer 2 · edited Dec 31 '16 at 02:18

0

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

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

edited Dec 31 '16 at 02:18

Martin Tournoij

26,737
24
105
146

answered Dec 23 '10 at 20:28

Simon

66
1
7

Resize 1 background image for multiple div containers on a page

2 Answers2