Bietet CSS3 eine Eigenschaft "Mindestgröße" für "Hintergrund"?

Question

Ich

background-size: 100%; 

mit meinem Hintergrundbild passen (im Körper-Tag) in das Browserfenster.

Aber gibt es eine CSS3 background-Eigenschaft, um eine Mindestgröße zu setzen?

Oder werde ich brauche etwas div- "Trick" wie:

<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%; 
} 

Answer 1

ich glaube, Sie suchen

background-size: contain; 

ODER

background-size: cover; 

Der Unterschied, dass cover spezifiziert sein Das Hintergrundbild sollte so klein wie möglich sein und dabei sein Seitenverhältnis beibehalten. contain legt andererseits fest, dass das Hintergrundbild so groß wie möglich sein soll.

Siehe die MDN-Dokumentation here.

Answer 2

Wie über das Hinzufügen dieser:

@media screen and (max-width:700px){ 
    #bg img { width: 500px; /* fixed width under 700px */ } 
}