In diesem Kapitel erfahren Sie, wie Sie einem Element mehrere Hintergrundbilder hinzufügen.
Außerdem erfahren Sie mehr über die folgenden Eigenschaften:
background-size
background-origin
background-clip
In this chapter you will learn how to add multiple background images to one element.
You will also learn about the following properties:
background-size
background-origin
background-clip
Mit CSS können Sie mehrere Hintergrundbilder für ein Element hinzufügen background-image
-Eigenschaft.
Die verschiedenen Hintergrundbilder werden durch Kommas getrennt, und die Bilder sind durch Kommas getrennt übereinander gestapelt, wobei das erste Bild dem Betrachter am nächsten ist.
Das folgende Beispiel hat zwei Hintergrundbilder, das erste Bild ist eine Blume (nach unten und rechts ausgerichtet) und das zweite Bild ist ein Papierhintergrund (nach der oberen linken Ecke ausgerichtet):
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Über das einzelne können mehrere Hintergrundbilder angegeben werden Hintergrundeigenschaften (wie oben) oder die Abkürzungseigenschaft background
.
Im folgenden Beispiel wird die Abkürzungseigenschaft background
verwendet (gleiches Ergebnis wie Beispiel oben):
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Mit der CSS-Eigenschaft background-size
können Sie die Größe von Hintergrundbildern festlegen.
Die Größe kann in Längen, Prozentsätzen oder durch Verwendung einer der beiden Angaben angegeben werden Schlüsselwörter: enthalten oder abdecken.
Das folgende Beispiel ändert die Größe eines Hintergrundbilds auf eine viel kleinere Größe als das Originalbild (unter Verwendung von Pixeln):
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Hier ist der Code:
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background: url(img_flwr.gif);
background-size: 100px 80px;
background-repeat: no-repeat;
padding: 15px;
}
#example2 {
border: 1px solid black;
background: url(img_flwr.gif);
background-repeat: no-repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>The background-size Property</h1>
<p>Resized background-image:</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>Original size of the background-image:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Die beiden anderen möglichen Werte für background-size
sind
contain
cover
Das Schlüsselwort contain
skaliert das Hintergrundbild so groß wie möglich (aber sowohl seine Breite als auch seine Höhe müssen in den Inhaltsbereich passen). Abhängig von den Proportionen des Hintergrunds Bild und Hintergrundpositionierungsbereich können einige Bereiche enthalten den Hintergrund, die nicht vom Hintergrundbild verdeckt werden.
Das Schlüsselwort cover
skaliert das Hintergrundbild so, dass der Inhaltsbereich groß ist vollständig vom Hintergrundbild bedeckt (sowohl seine Breite als auch seine Höhe sind gleich oder den Inhaltsbereich überschreiten). Daher sind einige Teile des Hintergrundbilds möglicherweise nicht vorhanden im Hintergrundpositionierungsbereich sichtbar.
Das folgende Beispiel veranschaulicht die Verwendung von contain
und cover
:
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover; background-repeat: no-repeat;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}
.div2 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}
.div3 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>The background-size Property</h1>
<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">
</body>
</html>
Die Eigenschaft background-size
akzeptiert auch mehrere Werte für die Hintergrundgröße (unter Verwendung einer durch Kommas getrennten Liste), wenn Sie mit mehreren Hintergründen arbeiten.
Im folgenden Beispiel sind drei Hintergrundbilder mit unterschiedlichen Angaben angegeben Hintergrundgrößenwert für jedes Bild:
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
background-size: 50px, 130px, auto;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Jetzt möchten wir auf einer Website ein Hintergrundbild haben, das die gesamte Website abdeckt Browserfenster jederzeit angezeigt.
Die Anforderungen lauten wie folgt:
Füllen Sie die gesamte Seite mit dem Bild (kein Leerraum)
Skalieren Sie das Bild nach Bedarf
Zentrieren Sie das Bild auf der Seite
Verursachen Sie keine Bildlaufleisten
Das folgende Beispiel zeigt, wie es geht; Verwenden Sie das <html>-Element (Das <html>-Element hat immer mindestens die Höhe des Browserfensters). Anschließend legen Sie darauf einen festen und zentrierten Hintergrund fest. Passen Sie dann die Größe mit an Eigenschaft „Hintergrundgröße“:
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
body {
color: white;
}
</style>
</head>
<body>
<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Sie können auch verschiedene Hintergrundeigenschaften für ein <div> verwenden, um ein Heldenbild (ein großes Bild mit Text) zu erstellen und es an der gewünschten Stelle zu platzieren.
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am John Doe</h1>
<h3>And I'm a Photographer</h3>
<button>Hire me</button>
</div>
</div>
<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>
</body>
</html>
Die CSS-Eigenschaft background-origin
gibt an, wo sich das Hintergrundbild befindet positioniert.
Die Eigenschaft nimmt drei verschiedene Werte an:
border-box - das Hintergrundbild beginnt in der oberen linken Ecke des Rahmens
padding-box - (Standard) Das Hintergrundbild beginnt in der oberen linken Ecke der Polsterkante
Content-Box - Das Hintergrundbild beginnt in der oberen linken Ecke des Inhalts
Das folgende Beispiel veranschaulicht die Eigenschaft background-origin
:
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
}
#example2 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#example3 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h1>The background-origin Property</h1>
<p>No background-origin (padding-box is default):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Die CSS-Eigenschaft background-clip
gibt den Malbereich des Hintergrunds an.
Die Eigenschaft nimmt drei verschiedene Werte an:
border-box - (Standard) Der Hintergrund wird bis zur Außenkante des Rahmens gemalt
Polsterbox - der Hintergrund wird bis zur Außenkante der Polsterung gemalt
Inhaltsbox - der Hintergrund wird innerhalb der Inhaltsbox gemalt
Das folgende Beispiel veranschaulicht die Eigenschaft background-clip
:
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>The background-clip Property</h1>
<p>No background-clip (border-box is default):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>
Eine Abkürzungseigenschaft zum Festlegen aller Hintergrundeigenschaften in einer Deklaration
Gibt den Malbereich des Hintergrunds an
Gibt ein oder mehrere Hintergrundbilder für ein Element an
Gibt an, wo das/die Hintergrundbild(er) positioniert ist/sind
Gibt die Größe der Hintergrundbilder an.