Wir legen also erstmal ein Hintergrundbild für ein Element mit der Klasse b-image an und das Bild soll sich nicht im Element wiederholen.
.b-image {
background-image: url(image.jpg);
background-repeat: no-repeat;
}Um das Bild nun zu skalieren verwenden wir die CSS3 Eigenschaft background-size.
.b-image {
background-size: 100px 50px;
}100px ist die Breite, 50px die Höhe des Hintergrundbildes. Eine auto-Angabe ist auch möglich. Wird die Höhe weggelassen, so wird sie automatisch auf auto gesetzt.
Weitere Werte für background-size
Prozentuale Werte
.b-image {
background-size: 50%;
}Die Breite des Hintergrundbilds beträgt 50% der Breite des Elternelements. Die Höhe ist auto.
Cover
.b-image {
background-size: cover;
}Das Hintergrundbild überdeckt das komplette Elternelement. Bereiche, die über das Elternelement hinausragen, werden abgeschnitten.
Contain
.b-image {
background-size: contain;
}Das Hintergrundbild wird so skaliert, dass es die maximalen Abmessungen annimmt mit denen es noch in das Elternelement passt.
Auto
.b-image {
background-size: auto;
}Das Hintergrundbild wird nicht skaliert.
Browserkompatibilität
background-size funktioniert ab folgenden Browser Versionen:
- Firefox 4.0
- Opera 10.5
- Internet Explorer 9
- Safari 4.1
- Google Chrome 4.0
Wer eine maximale Browserkompatibilität gewährleisten will, sollte folgende Prefixes noch verwenden.
.b-image {
-webkit-background-size: 100px 50px;
-moz-background-size: 100px 50px;
-o-background-size: 100px 50px;
background-size: 100px 50px;
}Mit den Prefixes wird background-size von folgenden Browsern unterstützt:
- Firefox 3.6
- Opera 10.0
- Internet Explorer 9
- Safari 3.0
- Google Chrome 1.0
