Hintergrundbilder sind ein häufig verwendetes Element des Webdesigns, das eine Atmosphäre auf einer Website schafft und sie attraktiver macht. Wenn es jedoch um Anpassungsfähigkeit geht, können Hintergrundbilder jedoch einige Schwierigkeiten darstellen.
Das Problem besteht darin, dass Hintergrundbilder in der Regel eine feste Größe haben und nicht automatisch basierend auf der Bildschirmgröße skaliert werden. Dies kann dazu führen, dass das Bild auf kleinen Bildschirmen nicht richtig zugeschnitten oder skaliert wird, was das Erscheinungsbild der Website beeinträchtigt.
Es gibt jedoch mehrere Möglichkeiten, ein Hintergrundbild in CSS anpassungsfähig zu machen, damit es an jede Bildschirmgröße angepasst und sein Seitenverhältnis beibehalten wird.
Die besten Möglichkeiten, ein Hintergrundbild in CSS anpassungsfähig zu machen
Wenn es darum geht, ein responsives Design für eine Webseite zu erstellen, ist es wichtig, das Hintergrundbild nicht zu vergessen, das auf verschiedenen Geräten in verschiedenen Größen und Proportionen angezeigt werden kann. Mit CSS können wir das Hintergrundbild so anpassen, dass es sich an unterschiedliche Bildschirmauflösungen und -orientierungen anpasst.
Hier sind einige der besten Möglichkeiten, um Ihnen zu helfen, ein Hintergrundbild in CSS anpassungsfähig zu machen:
| Art | Die Beschreibung |
|---|---|
| background-size: cover; | Diese Eigenschaft skaliert das Hintergrundbild so, dass es den Hintergrund des Elements vollständig bedeckt, wobei die Proportionen des Elements beibehalten werden. Es passt die Größe des Bildes automatisch an die Größe und Ausrichtung des Elements an. |
| background-size: contain; | Mit dieser Eigenschaft wird das Hintergrundbild so skaliert, dass es vollständig in den Hintergrund des Elements passt, wobei das Seitenverhältnis beibehalten wird. Es passt das Bild auch automatisch an die Größe und Ausrichtung des Elements an. |
| background-size: 100% auto; | Wenn Sie möchten, dass das Hintergrundbild den Hintergrund des Elements unabhängig vom Seitenverhältnis vollständig in der Breite ausfüllt, ist diese Eigenschaft für Sie nützlich. Dabei wird das Verhältnis zwischen Bildbreite und Bildhöhe beibehalten. |
| background-position: center; | Mit dieser Eigenschaft wird das Hintergrundbild sowohl horizontal als auch vertikal in der Mitte des Hintergrunds des Elements positioniert. Dadurch wird sichergestellt, dass das Bild unabhängig von seiner Größe oder seinem Seitenverhältnis am besten angezeigt wird. |
| media queries | Mithilfe von Medienabfragen können Sie das Hintergrundbild je nach Bildschirmauflösung anpassen. Sie können unterschiedliche Hintergrund- oder Bildeigenschaften für verschiedene Bildschirmgrößen und Geräte festlegen. |
Die Kombination dieser Methoden ermöglicht es Ihnen, ein adaptives Hintergrundbild zu erstellen, das auf allen Geräten und Bildschirmauflösungen gut aussieht.
Verwenden von Medienabfragen
Um ein adaptives Hintergrundbild in CSS zu erstellen, können Sie Medienabfragen verwenden. Sie ermöglichen es Ihnen, die Anzeige des Hintergrundbilds auf verschiedenen Geräten und Bildschirmen zu optimieren.
Medienabfragen bieten die Möglichkeit, Stile für bestimmte Bedingungen zu ändern, z. B. die Bildschirmbreite, die Pixeldichte und die Ausrichtung des Geräts. Mithilfe von Medienabfragen können Sie unterschiedliche Hintergrundbilder für unterschiedliche Bildschirmgrößen festlegen, um sicherzustellen, dass Sie auf jedem Gerät optimal angezeigt werden.
Die Hauptmethode zur Verwendung von Medienabfragen zum Implementieren eines adaptiven Hintergrundbilds in CSS besteht darin, verschiedene Bilder für verschiedene Bereiche der Bildschirmbreite festzulegen. Sie können beispielsweise ein Bild für eine Bildschirmbreite von weniger als 768 Pixeln und ein anderes Bild für eine Bildschirmbreite von mehr als 768 Pixeln festlegen.
Beispiel für die Verwendung von Medienabfragen für ein adaptives Hintergrundbild:
.container @media (min-width: 768px) >In diesem Beispiel wird bei einer Bildschirmbreite von weniger als 768 Pixeln das Bild "small" verwendet.jpg" und bei einer Bildschirmbreite von mehr als 768 Pixeln ist das Bild "large.jpg".
Auf diese Weise können Sie mithilfe von Medienabfragen ein adaptives Hintergrundbild in CSS erstellen, das auf verschiedenen Geräten und Bildschirmen optimal angezeigt wird.
Anwenden der Eigenschaft background-size
Eigenschaft background-size in CSS können Sie die Größe des Hintergrundbildes festlegen und steuern, wie es skaliert wird, wenn sich die Bildschirmgröße ändert.
Diese Eigenschaft kann sehr nützlich sein, wenn Sie responsive Websites erstellen, da Sie Hintergrundbilder erstellen können, die auf allen Geräten, von Mobiltelefonen bis hin zu Desktops, gut aussehen.
Eigenschaft background-size kann verschiedene Bedeutungen haben. Eine der beliebtesten ist die Bedeutung von "cover". Wenn Sie diesen Wert festlegen, wird das Hintergrundbild so skaliert, dass es die Abmessungen des Containers vollständig ausfüllt, während es seine Proportionen beibehält. Dies ist besonders nützlich, wenn Sie mit Hintergrundbildern arbeiten, die eine höhere Auflösung haben als die Containergrößen.
Ein weiterer nützlicher Eigenschaftswert background-size ist "contain". Wenn Sie diesen Wert verwenden, wird das Hintergrundbild so skaliert, dass es vollständig in die Größe des Containers passt. Das bedeutet, dass das Bild so verkleinert oder vergrößert werden kann, dass es vollständig in den Behälter passt, wobei die Proportionen beibehalten werden.
Sie können auch eigene Werte für die Eigenschaft festlegen background-size Verwenden Sie das Schlüsselwort "auto" oder geben Sie eine bestimmte Breite und Höhe in Pixeln oder Prozentsätzen an.
Insgesamt ist die Eigenschaft background-size sehr praktisch zum Erstellen adaptiver Hintergrundbilder in CSS. Damit können Sie die Größe und Skalierung Ihrer Bilder einfach verwalten und Ihre Website auf allen Geräten flexibler und attraktiver gestalten.
Verwendung der Vw-Maßeinheit
Um eine vw-Maßeinheit in CSS zu verwenden, genügt es, ihren Wert nach einer Zahl anzugeben, die einen Prozentsatz der Breite des Browserfensters darstellt. Wenn Sie beispielsweise den Wert 50vw festlegen, bedeutet dies, dass das Element die Hälfte des sichtbaren Bereichs des Browserfensters einnimmt.
Die Verwendung der Vw-Maßeinheit ist besonders nützlich beim Erstellen von Hintergrundbildern, da sie automatisch an die Größe des Browserfensters angepasst werden können. Wenn Sie beispielsweise ein Hintergrundbild haben, das die gesamte Breite des Browserfensters einnehmen muss, können Sie es mit der CSS-Eigenschaft background-size: 100vw, 100vh festlegen, was bedeutet, dass das Bild 100% der Breite und Höhe des sichtbaren Bereichs des Browserfensters einnimmt.
Es ist auch erwähnenswert, dass die Verwendung der Vw-Maßeinheit es ermöglicht, adaptive Hintergrundbilder zu erstellen, ohne unterschiedliche Auflösungen auf verschiedenen Bildschirmen festlegen zu müssen. Dies reduziert den Code und erleichtert die Unterstützung.
Anwenden der Eigenschaft background-position
Mit der Eigenschaft background-position können Sie die Position des Hintergrundbilds relativ zum Container festlegen. Dies kann nützlich sein, wenn Sie ein responsives Design erstellen, wenn Sie die Position des Hintergrundbilds basierend auf der Bildschirmgröße oder dem Gerät ändern möchten.
Der Wert der Eigenschaft background-position wird in Pixeln oder Prozentsätzen angegeben und hat zwei Komponenten: eine horizontale und eine vertikale Position. Beispielsweise legt der Wert "50% 50%" das Hintergrundbild in der Mitte des Containers fest, während der Wert "left top" es in der oberen linken Ecke festlegt.
Beim adaptiven Layout können Sie unterschiedliche Werte für die Eigenschaft background-position für unterschiedliche Bildschirmgrößen verwenden. Beispielsweise können Sie für mobile Geräte den Wert "center" so einstellen, dass sich das Bild in der Mitte des Bildschirms befindet, und für größere Bildschirme den Wert "right top", sodass sich das Bild oben rechts befindet.
Sie können mithilfe von Medienausdrücken unterschiedliche Werte für die Eigenschaft background-position basierend auf der Bildschirmgröße festlegen. Der folgende CSS-Code legt beispielsweise unterschiedliche Werte für die Eigenschaft background-position für Bildschirme fest, die größer als 768 Pixel und kleiner als 1024 Pixel sind:
| Medialer Ausdruck | background-position |
|---|---|
| @media screen and (min-width: 768px) and (max-width: 1023px) | right top |
Mit der Eigenschaft background-position können Sie daher adaptive Hintergrundbilder erstellen, die auf verschiedenen Geräten und Bildschirmen korrekt angezeigt werden.
