开发者

Resize 1 background image for multiple div containers on a page

开发者 https://www.devze.com 2023-02-01 13:37 出处:网络
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?

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号