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.
精彩评论