1. Startseite
  2. »
  3. Allgemeine Themen & Trends
  4. »
  5. CSS background size – Hintergrundbilder ganz einfach optimieren!

CSS background size – Hintergrundbilder ganz einfach optimieren!

CSS background size

CSS background size – Hintergrundbilder ganz einfach optimieren!

CSS Background Size ist ein CSS Tool, das es Entwicklern ermöglicht, die Größe eines Hintergrundes den Bedürfnissen entsprechend anzupassen. Background size (Hintergrundgröße) kann damit ein besonders wichtiges Werkzeug für Entwickler sein, das in Kombination mit anderen CSS Eigenschaften zur Erstellung interessanter und in manchen Fällen sogar intuitiver Anzeigeerlebnisse beitragen kann – das Beste daran: Es ist auch für Quereinsteiger leicht zu verwenden!

CSS background size – Was ist das eigentlich?

Der Befehl background size ermöglicht es kreativen Entwicklern, Hintergrundbilder für Webseiten oder andere Multimedia-Inhalte auf ästhetisch ansprechende Weise anzupassen und formatieren. Die Technik basiert auf den CSS Eigenschaften background-image, background-repeat und background-position und ermöglicht es, den Prozess des Einfügens und Anpassens eines Hintergrundbilds zu vereinfachen. Durch die Verwendung der Eigenschaft CSS background size können Entwickler die gewünschte Größe des Hintergrundbilds definieren, ohne dass es zu einem Verlust an Qualität kommt.

Es gibt verschiedene Möglichkeiten, einen Hintergrund mittels CSS background size anzupassen, die im Folgenden genauer erläutert werden.

CSS Hintergrundgrößen – Eine Anleitung für Anfänger

CSS Hintergrundgrößen sind ein wichtiges Element des Webdesigns, mit dem Webdesigner bestimmen, wie ein Hintergrundbild angezeigt wird. Mit verschiedenen CSS Größenoptionen können Designer die Größe des Hintergrundbildes eingeben, um den idealen Hintergrund zu erhalten.

A – Farbe als Hintergrund festlegen

Ausgangspunkt für die Definition einer background size ist zunächst eine Fläche, in die ein Hintergrund eingefügt werden soll. In unserem Beispiel handelt es sich hierbei um einen 300 x 300 container. Mit der property background-color: red wird die Farbe Rot als Hintergrund festgelegt.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-color: red;
}
</style>

Wichtig ist es zu wissen, dass anstelle von red auch Hexadezimal-Codes für spezifische Farbpaletten verwendet werden können.

B – Bild als Hintergrund festlegen

Nachdem die Hintergrund-Farbe festgelegt wurde, kann nun eine Bild-Datei als Hintergrund definiert werden. Um dies zu bewerkstelligen, muss zunächst einmal die Bild-Datei auf dem Computer lokalisiert werden. Dazu wird die property background-image und das jeweilige Ordner-Verzeichnis genutzt.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
}
</style>

C – Hintergrundgröße anpassen

Nachdem die Hintergrund-Farbe und das Bild als Hintergrund definiert wurden, kann die Bildgröße manuell angepasst werden. Hierzu wird die property background size verwendet.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px;
}
</style>

Hierbei ist es wichtig zu verstehen, dass die background size in den Standardeinstellungen stets auf auto gestellt ist. Das bedeutet, dass das Bild – wenn es nicht manuell mit background size verstellt wird – automatisch in Original-Größe eingefügt wird. Weiterhin ist es möglich, die background size sowohl in Höhe als auch in Weite zu definieren, wie im folgenden Beispiel ersichtlich wird.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px 200px
}
</style>

Es gibt vier verschiedene Methoden, mit denen Web-Designer die Größe ihres Hintergrundbildes anpassen können: „contain„, „cover„, „auto“ und „manuell„, wobei die letzten zwei Möglichkeiten selbsterklärend ist.

C.1 – background size: contain

Mit der property background-size: contain wird das Bild als Ganzes eingefügt, ohne dass es zugeschnitten wird. Dadurch werden häufig Leerstellen im Container erzeugt, die mit der vordefinierten Hintergrundfarbe gefüllt sind.

C.2 – background size: cover

Die property background-size: cover sorgt dafür, dass alle Leerstellen des Containers mit dem Bild abgedeckt werden, allerdings sorgt cover häufig dafür, dass das Bild nicht gänzlich sichtbar ist. Hier kann eine Repositionierung des Bildes Abhilfe schaffen. Auf diesen Punkt wird im Folgenden genauer eingegangen.

D – Bildwiederholung

Nachdem ein wenig mit der background size herumgespielt wird, wird schnell deutlich, dass die Wiederholung desselben Bildes störend wirken kann. In diesen Fällen sollte die Bildwiederholung mit der property background-repeat: no-repeat ausgestellt werden.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
}
</style>

Weitere mögliche Befehle inkludieren initial, repeat, round oder space.

E – Bildposition ändern

Um das Bild als Hintergrund in bestimmter Weise im Container zu positionieren, muss die property background-position verstellt werden.

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;
}
</style>

In unserem Beispiel wurde das Bild mit dem Befehl center in die Mitte des Containers gerückt. Weitere mögliche Befehle wären die Befehle top right oder left.

F – Transparenz einfügen

Wenn das Bild soweit wie möglich den eigenen Bedürfnissen entsprechend eingestellt wurde, kann es in seiner Transparenz verstellt werden.


.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background-image: url("./OrdnerName/Bild.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
}
</style>

Hierbei ist es wichtig zu wissen, dass die Größe 1 die volle Deckkraft angibt, während die Größe 0 das Bild gänzlich unsichtbar macht.

Befehl background – Was es damit auf sich hat

Der Befehl background stellt eine Abkürzung aller obengenannter properties dar. Dieser Befehl ermöglicht es somit, die Hintergrundfarbe, das Bildverzeichnis, die Hintergrundwiederholung und die Hintergrundposition auf einmal zu definieren. So kann effektiv Zeit gespart werden!


.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto;
  background: green  ("./OrdnerName/Bild.jpg")  no-repeat  left;
  background-size: cover;
}
</style>

Bei der Verwendung dieses Befehls sollte jedoch auf die Befolgung der obengenannten Reihenfolge geachtet werden, da er ansonsten nicht funktioniert. Weiterhin muss die background size weiterhin separat eingestellt werden, da sie nicht unter background zusammengefasst wird.

CSS Hintergrundgrößen zusammengefasst

Zusammenfassend lässt sich sagen, dass CSS background size ein wichtiges Element des Webdesigns darstellt. Mit verschiedenen CSS Größenoptionen, einschließlich „cover„, „contain„, „auto“ und „manuell„, können sowohl Anfänger als auch bewanderte Webdesigner die Größe des Hintergrundbildes professionell anpassen und das für sie ideale Ergebnis erzielen. Mit diesem Wissen können Entwickler jeden Alters ihre Webseiten problemlos designen und spielerisch ansprechender gestalten!

Alles was Du über CSS Hintergrundgrößen wissen musst

Was ist CSS background size?

CSS background size stellt ein sehr mächtiges CSS Werkzeug dar, das alte und junge Entwickler beim Entwerfen von kreativen Webseiten verwenden können, um die Größe eines Hintergrunds zu verstellen und zu optimieren. Der Einsatz der Größenangaben erlaubt Dir, wichtige Hinweise zur Ausgabe des Designs zu liefern. So kann die absolute Größe des Hintergrunds angeben oder nur die proportionale Größe verwendet werden, die vom Inhalt bestimmt wird.

Wie kann die CSS background size geändert werden?

Du kannst die background size so einstellen, dass sie immer ohne Veränderung der Proportionen angezeigt wird. Um dies zu erreichen, musst Du die Wahl zwischen den Properties „contain“ und „cover“ treffen. Der Wert „contain“ passt das Hintergrundbild bei der Anzeige an das Element an, ohne dass Proportionen oder Qualität verloren gehen. Der Wert „cover“ entspricht dabei einer vollständigen Abdeckung des Elements durch das Hintergrundbild.

Was ist die beste CSS background size?

Der beste Weg, um festzustellen, welche Art von background size für ein bestimmtes Hintergrundbild am besten geeignet ist, besteht darin, eine Reihe von Optionen zu evaluieren und zu testen und dann diejenige zu wählen, die am besten zu den spezifischen Anforderungen der Seite passt.

Ähnliche Beiträge