Ein Hintergrundbild füllt den Browserfenster selten perfekt aus, es sei denn, es entspricht exakt dem Seitenverhältnis des Bildschirms des Besuchers. Dies ist ein erwartetes Verhalten – Browserfenster gibt es in unzähligen Größen und Ausrichtungen, daher bietet SeedProd Ihnen drei Optionen für die Hintergrundgröße, um zu steuern, wie das Bild angezeigt wird. Wenn Sie verstehen, welche Option Sie verwenden sollen, erhalten Sie das gewünschte Ergebnis.

Optionen für die Hintergrundgröße

Sie können die Größe Ihres Hintergrundbilds ändern, indem Sie die Einstellungen für den Abschnitts- oder Seitenhintergrund im SeedProd-Editor bearbeiten. Die drei verfügbaren Optionen verhalten sich wie folgt:

Cover (Standard)

Das Bild skaliert so, dass es den Hintergrundbereich vollständig ausfüllt. Es werden niemals leere Flächen angezeigt, aber Teile des Bildes können je nach Bildschirmgröße und Seitenverhältnis des Besuchers abgeschnitten werden.

Dies ist die Standardeinstellung und eignet sich gut für die meisten Vollbild-Hero-Hintergründe, bei denen das Ausfüllen des Bereichs wichtiger ist als die Anzeige des gesamten Bildes. Um zu steuern, welcher Teil des Bildes beim Zuschneiden sichtbar bleibt, passen Sie die Einstellung Hintergrundposition (Brennweite) an – zum Beispiel hält die Einstellung auf Mitte Mitte den mittleren Teil des Bildes im Blick.

Enthalten

Das Bild skaliert so, dass es vollständig in den Hintergrundbereich passt, ohne abgeschnitten zu werden. Das gesamte Bild ist immer sichtbar, aber wenn das Seitenverhältnis des Bildes nicht mit dem Container übereinstimmt, erscheinen leere Flächen darum herum, die von der Hintergrundfarbe gefüllt werden.

Verwenden Sie Contain, wenn es wichtig ist, dass das gesamte Bild immer sichtbar ist – zum Beispiel ein Logo, ein Diagramm oder eine Illustration, bei der durch Zuschneiden bedeutungsvoller Inhalt entfernt würde. Legen Sie eine Hintergrundfarbe fest, die das Bild ergänzt, um die leeren Flächen zu füllen.

Auto

Das Bild wird in seiner ursprünglichen Größe ohne Skalierung angezeigt. Wenn das Bild kleiner als der Container ist, wird es standardmäßig wiederholt; wenn es größer ist, wird es überlaufen und abgeschnitten. Diese Option gibt Ihnen die direkteste Kontrolle, erfordert jedoch, dass das Bild genau für den Container dimensioniert ist.

Die richtige Einstellung wählen

• Hintergrund füllt den Bereich ohne Lücken → verwenden Sie Cover und passen Sie die Hintergrundposition an, um zu steuern, welcher Teil des Bildes zentriert wird.
• Gesamtes Bild muss immer sichtbar sein → verwenden Sie Contain und legen Sie eine Hintergrundfarbe fest, um den umgebenden Bereich zu füllen.
• Bild hat eine bestimmte feste Größe → verwenden Sie Auto und dimensionieren Sie Ihr Bild so, dass es genau den Containermaßen entspricht.

Empfehlungen zur Bildgröße

Für die besten Ergebnisse mit der Einstellung Cover verwenden Sie ein Hintergrundbild, das mindestens 1920 × 1080 Pixel groß ist, und exportieren Sie es in einer geeigneten Dateigröße für das Web (typischerweise unter 300 KB für JPEG-Bilder). Ein breites, querformatiges Bild skaliert und schneidet sich über verschiedene Bildschirmgrößen hinweg besser und vorhersehbarer als ein quadratisches oder hochformatiges Bild.

Wenn Ihr Hintergrundbild auch nach Anpassung dieser Einstellungen immer noch nicht richtig aussieht, versuchen Sie, mit der Option Hintergrundposition zu experimentieren, um den Fokuspunkt zu verschieben, oder verwenden Sie ein breiteres Quellbild, das mehr Flexibilität bietet, wenn auf schmaleren Bildschirmen zugeschnitten wird.