diff options
Diffstat (limited to 'files/de/web/css/background-size/index.html')
| -rw-r--r-- | files/de/web/css/background-size/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/files/de/web/css/background-size/index.html b/files/de/web/css/background-size/index.html new file mode 100644 index 0000000000..de6629ef6b --- /dev/null +++ b/files/de/web/css/background-size/index.html @@ -0,0 +1,151 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/background-size +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <code style="font-size: 14px; line-height: inherit;">background-size</code><span style="line-height: inherit;"> </span><a href="/en-US/docs/CSS" style="line-height: inherit;" title="CSS">CSS</a> Eigenschaft definiert die Abmessungen eines Hintergrundbildes. Die Abmessungen des Bildes können komplett festgelegt werden oder nur teilweise, um das eigentliche Seitenverhältnis zu erhalten.</p> + +<div class="note"><strong>Hinweis:</strong> Folgt auf <code>background-size</code> die {{cssxref("background")}} Kurzform und es wird in ihr kein Wert für diese Eigenschaft angegeben, wird der Wert auf den Standardwert zurückgesetzt.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwort Syntax */ +background-size: cover; +background-size: contain; + +/* Ein-Wert Syntax: Der Wert definiert die Bildbreite, + die Höhe wird auf 'auto' gesetzt */ +background-size: 50%; +background-size: 3em; +background-size: 12px; +background-size: auto; + +/* Zwei-Wert Syntax: Der erste Wert definiert die Bildbreite, + der Zweite die Höhe */ +background-size: 50% auto; +background-size: 3em 25%; +background-size: auto 6px; +background-size: auto auto; + +/* Werte für mehrere Hintergründe, die durch background-image definiert wurden, + können kommagetrennt aufgelistet werden */ +background-size: auto, auto /* Nicht zu verwechseln mit background-size: auto auto */ +background-size: 50%, 25%, 25%; +background-size: 6px, auto, contain; + +/* Globale Werte */ +background-size: inherit; +background-size: initial; +background-size: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Ein <code>{{cssxref("<length>")}}</code> Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt.</dd> + <dt><code><percentage></code></dt> + <dd>Ein {{cssxref("<percentage>")}} Wert, der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert (angegeben durch {{cssxref("background-origin")}}). Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements und dessen Innenabstand (Padding), kann aber auch so abgeändert werden, dass er nur den Inhalt umfasst oder Inhalt, Innenabstand und Rahmen. Ist die {{cssxref("background-attachment","attachment")}} Eigenschaft auf <code>fixed</code> gesetzt, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs. Negative Prozentwerte sind nicht erlaubt.</dd> + <dt><code>auto</code></dt> + <dd>Das <code>auto</code> Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.</dd> + <dt><code>cover</code></dt> + <dd>Das <code>cover</code> Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.</dd> + <dt><code>contain</code></dt> + <dd>Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.</dd> +</dl> + +<p>Die Interpretation möglicher Werte hängt von den Maßen (Breite und Höhe) und der Proportion (Verhältnis von Breite zu Höhe) des Bildes ab. Eine Rastergrafik hat immer eigene Maße und eine eigene Proportion. Eine Vektorgrafik kann beide eigenen Maße haben (und somit auch eine eigene Proportion). Sie kann aber auch nur ein oder kein eigenes Maß haben. In beiden Fällen kann sie (muss aber nicht) eine eigen Proportion haben. Farbverläufe werden als Grafiken ohne eigene Maße und eigener Proportion behandelt.</p> + +<div class="note"><strong>Hinweis:</strong> Dieses Verhalten hat sich in Gecko 8.0 {{geckoRelease("8.0")}} geändert. Vorher wurden Farbverläufe als Grafiken ohne eigene Maße, aber mit einer eigenen Proportion behandelt. Die Proportion entsprach dabei derjenigen des Positionierungsbereich des Hintergrunds.</div> + +<p>Hintergrundbilder, die mittels {{cssxref("-moz-element")}} generiert wurden, werden momentan als Bilder mit den Maßen des Elements behandelt. Außer es handelt sich um ein SVG-Element, dann werden die Maße des Hintergrund-Positionierungsbereich mit der eigenen Proportion verwendet.</p> + +<div class="note"><strong>Hinweis:</strong> Die entspricht nicht dem spezifizierten Verhalten, wonach die Maße und die Proportion stets denjenigen Werten des Elements entsprechen müssen.</div> + +<p>Die gerenderte Größe des Hintergrundbildes wird folgendermaßen berechnet:</p> + +<dl> + <dt>Falls beide Werte von <code>background-size</code> angegeben werden und nicht <code>auto</code> sind:</dt> + <dd>Das Hintergrundbild wird mit den angegebenen Werten gerendert.</dd> + <dt>Falls die Schlüsselwörter <code>contain</code> oder <code>cover</code> gesetzt werden:</dt> + <dd>Das Bild behält seine eigene Proportion bei, wobei die Maße so berechnet werden, dass das Bild im Hintergrund-Positionierungsbereich enthalten ist beziehungsweise ihn abdeckt. Besitzt das Bild keine eigene Proportion, wird es auf die Größe des Hintergrund-Positionierungsbereichs gerendert.</dd> + <dt>Falls <code>background-size </code><code>auto</code> oder <code>auto auto</code> ist:</dt> + <dd>Besitzt das Bild beide Maße, wird es in dieser Größe gerendert. Hat es keine eigenen Maße und keine eigene Proportion, wird es in der Größe des Hintergrund-Positionierungsbereich gerendert. Hat es keine Maße, aber eine Proportion, wird es so gerendert als ob <code>contain</code> angegeben wurde. Hat es ein Maß angegeben und besitzt eine Proportion, wird es entsprechend dieser Angaben gerendert. Hat es ein Maß und keine Proportion, wird es mit diesem eigenen Maß und dem entsprechenden Maß des Hintergrund-Positionierungsbereichs gerendert.</dd> + <dt>Falls <code>background-size</code> ein <code>auto</code> und ein nicht-<code>auto</code> Wert besitzt:</dt> + <dd>Hat das Bild eine eigene Proportion, wird das nicht spezifizierte Maß aus dem angegebenen Maß und der Proportion berechnet. Hat das Bild keine eigene Proportion, wird das angebene Maß und das entsprechende eigene Maß des Bilds verwendet, falls vorhanden. Existiert kein eigenes Maß, wird dasjenige des Hintergrund-Positionierungsbereichs verwendet. </dd> +</dl> + +<p>Es ist zu beachten, dass Vektorgrafiken ohne Maße oder Proportion noch nicht vollständig in allen Browsern implementiert sind. Aus diesem Grund sollte man nicht zu sehr auf das oben beschriebene Verhalten vertrauen. Tests in unterschiedlichen Browsern (insbesondere Firefox 7 oder älter und Firefox 8 oder neuer) sind nötig, um festzustellen, ob die verschiedenen Darstellungen akzeptabel sind.</p> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html">Diese Demonstration von <code>background-size: cover</code></a> und <a href="http://whereswalden.com/files/mozilla/background-size/page-contain.html">diese Demonstration von <code>background-size: contain</code></a> sollten in einem neuen Fenster geöffnet werden, damit man das Verhalten von <code>cover</code> und <code>contain</code> bei ändernder Größe des Hintergrund-Positionierungsbereichs beobachten kann. <a href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">Diese Demos</a> zeigen das Zusammenspiel von <code>background-size</code> mit anderen <code>background-*</code> Attributen.</p> + +<h2 id="Hinweise">Hinweise</h2> + +<p>Wird ein Farbverlauf als HIntergrund und zusätzliche eine <code>background-size</code> angegeben, ist es empfehlenswert, die Hintergrund-Größe nicht mit einem einzelnen <code>auto</code> Wert oder nur mit einer Breite zu definieren (zum Beispiel <code>background-size: 50%</code>). Das Rendern solcher Farbverläufe hat sich mit Firefox 8 geändert und führt generell zu einer inkonsistenten Darstellung in Browsern, die die beiden Spezifikationen <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> und <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a> nicht vollständig implementieren.</p> + +<pre class="brush: css">.bar { + width: 50px; height: 100px; + background-image: gradient(...); + + /* NICHT EMPFOHLEN */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* OKAY */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>Insbesondere ist es nicht empfohlen, ein Pixel-Wert und ein <code>auto</code> Wert zusammen mit einem Farbverlauf zu verwenden, da die Darstellung in Firefox-Versionen vor 8 oder in anderen Browsern, die nicht das Firefox 8 Rendering verwenden nicht nachzuvollziehen ist, wenn die genaue Größe des Elements nicht bekannt ist.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Spezifikation</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +{{Compat("css.properties.background-size")}} + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Using_multiple_backgrounds" title="CSS/Multiple backgrounds">Mehrere Hintergründe</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Scaling_background_images" title="CSS/Scaling_background_images">HIntergrundbilder skalieren</a></li> +</ul> |