Weißen Rand um Background-Bild entfernen

Wie kann man den weißen Rand um ein anpassungsfähiges Hintergrundbild in HTML entfernen?

Uhr
Um den lästigen weißen Rand um dein Hintergrundbild loszuwerden, musst du ein paar zusätzliche CSS-Stile hinzufügen. Das Problem liegt nicht am HTML-Code selbst allerdings an der Art und Weise ebenso wie der Browser das Bild darstellt. Lass uns das mal genauer betrachten.

Zuerst einmal, verstehe, dass Hintergrundbilder von Natur aus immer so angezeigt werden, dass sie sich wiederholen (repeat) oder gestreckt (stretch) werden um den verfügbaren Platz zu füllen. In deinem Beispiel scheint das Bild gestreckt zu werden was diesen unschönen weißen Rand verursacht.

Daher ist es wichtig, dem Body-Element deines HTML-Dokuments folgende CSS-Stile hinzuzufügen:
```css
body {
margin: 0;
padding: 0;
background-size: cover;
}
```

Mit `background-size: cover;` wird das Hintergrundbild so skaliert dass es den gesamten verfügbaren Bereich abdeckt ohne verzerrt zu wirken. Durch das Setzen von `margin: 0; padding: 0;` wird sichergestellt: Der Browser keinen zusätzlichen Raum um das Hintergrundbild herum einfügt.

Wenn du diese Änderungen vornimmst und deine Website erneut lädst, solltest du feststellen, dass der weiße Rand verschwunden ist und dein Hintergrundbild nahtlos an den Rand des Browserfensters angepasst wird.
Probier es genauso viel mit aus und freu dich über einen randlosen Auftritt deines Hintergrundbildes! 🎉






Anzeige