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%;
}
I think you are looking for
OR
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.
How about adding this: