Does CSS3 offer a “minimum-size” property for “bac

2019-02-21 07:50发布

I'm using

background-size: 100%;

To fit my background image (in the body-tag) to the browser window.

But is there a CSS3 background-property to set a minimum-size?

Or will I need some div-"trick" like:

<div id="bg">
    <img src="images/bg.jpg" alt="">
</div>

#bg {
    position:fixed;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
}
#bg img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:50%;
    min-height:50%;
}

2条回答
Summer. ? 凉城
2楼-- · 2019-02-21 07:54

I think you are looking for

background-size: contain;

OR

background-size: cover;

The difference being that cover specifies that the background image should be as small as possible while maintaining its aspect ratio. contain on the other hand specifies that the background image should be as large as possible.

See the MDN documentation here.

查看更多
放我归山
3楼-- · 2019-02-21 07:56

How about adding this:

@media screen and (max-width:700px){
    #bg img { width: 500px; /* fixed width under 700px */ }
}
查看更多
登录 后发表回答