veröffentlicht am: 6. Juni 2024
CSS: Hintergrundbild einfügen – So gehts!
Wenn du ein Hintergrundbild in CSS einfügen möchtest dann musst du eigentlich die URL des jeweiligen Bildes einfügen. Wenn du genau weiß wo das Bild auf deinem Webspace liegt kannst du einfach die URL angeben.
CSS-Hintergrundbilder: So fügst du sie deiner Webseite hinzu
Mit CSS-Hintergrundbildern gestaltest du deine Webseiten optisch ansprechend und individuell. Du hast verschiedene Möglichkeiten, Bilder einzubinden und deren Darstellung anzupassen. Im Folgenden stelle ich dir die wichtigsten Optionen vor:
Die Eigenschaft background-image:
CSS
selector {
background-image: url('pfad/zum/bild.jpg');
}- Ersetze
url('pfad/zum/bild.jpg')durch den Pfad zu deinem Bild. - Die Eigenschaft kann in jedem CSS-Selektor angewendet werden, z.B. für
<div>,<p>oder<body>.
Optionen:
background-repeat: Legt fest, wie oft das Bild wiederholt werden soll.repeat: Standardwert, Bild wird horizontal und vertikal wiederholt.repeat-x: Wiederholung nur horizontal.repeat-y: Wiederholung nur vertikal.no-repeat: Bild wird nur einmal angezeigt.space: Füllt den leeren Bereich mit wiederholten Kopien des Bildes.round: Füllt den Bereich mit wiederholten Kopien, wobei die Ecken abgeschnitten werden.
background-position: Bestimmt die Position des Bildes.top left: Standardwert, Bild links oben.top center: Bild mittig oben.top right: Bild rechts oben.center left: Bild links mittig.center: Bild mittig.center right: Bild rechts mittig.bottom left: Bild links unten.bottom center: Bild mittig unten.bottom right: Bild rechts unten.- Prozentwerte und Pixelangaben sind ebenfalls möglich.
background-size: Skaliert das Bild.auto: Standardwert, Bild behält seine Größe.contain: Bild wird so skaliert, dass es vollständig in den Container passt, ohne es zuzuschneiden.cover: Bild wird so skaliert, dass es den Container vollständig füllt, wobei Teile des Bildes abgeschnitten werden können.- Prozentwerte und Pixelangaben definieren die neue Größe des Bildes.
background-attachment: Legt fest, wie sich das Bild beim Scrollen verhält.fixed: Bild bleibt fixiert an der Position und scrollt nicht mit der Seite.local: Bild scrollt mit dem Element, in dem es definiert ist.scroll: Bild scrollt mit der Seite.
Beispiele:
Bild wiederholen und mittig platzieren:
CSS
body {
background-image: url('bild.jpg');
background-repeat: repeat;
background-position: center;
}Bildgröße auf 50% skalieren und fixieren:
CSS
css hintergrundbild div {
background-image: url('bild.jpg');
background-size: 50%;
background-attachment: fixed;
}
Über Mich
Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite
Weitere Beiträge auf Blogseite.com
Kennst du schon diese Memes?
