Hintergrundbilder auf Elemente Anwenden
background-image-Eigenschaft ermöglicht das Hinzufügen eines Bildes als Hintergrund eines HTML-Elements. Die grundlegende Syntax ist sehr einfach:
background-image: url("image-url.jpg");
Als Wert für die background-image-Eigenschaft wird url() verwendet, und innerhalb dieser Klammern wird die Bild-URL angegeben.
index.html
index.css
background-repeat
Legt fest, ob das Bild horizontal, vertikal, in beide Richtungen oder gar nicht wiederholt wird.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position wird verwendet, um die Startposition eines Hintergrundbildes innerhalb des Hintergrundbereichs eines Elements festzulegen. Mit dieser Eigenschaft kann bestimmt werden, wo das Hintergrundbild platziert und wie es relativ zum Element positioniert werden soll. Die Position muss auf der x- und y-Achse angegeben werden.
background-position: x y
index.html
index.css
background-size
background-size legt die Größe des Hintergrundbildes eines Elements fest. Diese Eigenschaft kann verwendet werden, um das Bild an das Element anzupassen oder eine bestimmte Größe für das Hintergrundbild zu definieren.
background-size: auto | cover | contain | value in px/em/rem;
autobelässt das Hintergrundbild in seiner Originalgröße (Standard);coverskaliert das Bild so, dass das gesamte Element abgedeckt wird, wobei das Seitenverhältnis erhalten bleibt; Teile des Bildes können dabei abgeschnitten werden;containskaliert das Bild so, dass es vollständig innerhalb des Elements angezeigt wird, wobei das Seitenverhältnis erhalten bleibt; es können leere Bereiche entstehen;valuelegt benutzerdefinierte Abmessungen für das Hintergrundbild fest, wie z. B.100px 50pxoder Prozentangaben wie50%.
index.html
index.css
1. Was bewirkt die Eigenschaft background-image?
2. Was bewirkt die Eigenschaft background-repeat?
3. Welche Eigenschaft bestimmt die Position des Hintergrundbildes eines Elements?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you show me an example of how to use all these background properties together?
What is the difference between `cover` and `contain` for background-size?
How do I center a background image both vertically and horizontally?
Awesome!
Completion rate improved to 2.56Hintergrundbilder auf Elemente Anwenden
Swipe um das Menü anzuzeigen
background-image-Eigenschaft ermöglicht das Hinzufügen eines Bildes als Hintergrund eines HTML-Elements. Die grundlegende Syntax ist sehr einfach:
background-image: url("image-url.jpg");
Als Wert für die background-image-Eigenschaft wird url() verwendet, und innerhalb dieser Klammern wird die Bild-URL angegeben.
index.html
index.css
background-repeat
Legt fest, ob das Bild horizontal, vertikal, in beide Richtungen oder gar nicht wiederholt wird.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position wird verwendet, um die Startposition eines Hintergrundbildes innerhalb des Hintergrundbereichs eines Elements festzulegen. Mit dieser Eigenschaft kann bestimmt werden, wo das Hintergrundbild platziert und wie es relativ zum Element positioniert werden soll. Die Position muss auf der x- und y-Achse angegeben werden.
background-position: x y
index.html
index.css
background-size
background-size legt die Größe des Hintergrundbildes eines Elements fest. Diese Eigenschaft kann verwendet werden, um das Bild an das Element anzupassen oder eine bestimmte Größe für das Hintergrundbild zu definieren.
background-size: auto | cover | contain | value in px/em/rem;
autobelässt das Hintergrundbild in seiner Originalgröße (Standard);coverskaliert das Bild so, dass das gesamte Element abgedeckt wird, wobei das Seitenverhältnis erhalten bleibt; Teile des Bildes können dabei abgeschnitten werden;containskaliert das Bild so, dass es vollständig innerhalb des Elements angezeigt wird, wobei das Seitenverhältnis erhalten bleibt; es können leere Bereiche entstehen;valuelegt benutzerdefinierte Abmessungen für das Hintergrundbild fest, wie z. B.100px 50pxoder Prozentangaben wie50%.
index.html
index.css
1. Was bewirkt die Eigenschaft background-image?
2. Was bewirkt die Eigenschaft background-repeat?
3. Welche Eigenschaft bestimmt die Position des Hintergrundbildes eines Elements?
Danke für Ihr Feedback!
