Bild im div wird nicht komplett angezeigt

mbhh

Hallo zusammen,

ich möchte gerne einem div ein Hintergrundbild geben, das dann mit dem div skaliert werden kann. Auf dem Bild soll ein Text stehen.

Momentan scheitere ich leider bereits dabei, das Bild komplett anzeigen zu lassen. Die Breite ist da, aber die Höhe wird abgeschnitten. Habe alles mögliche probiert, bisher erfolglos.

Wer hat einen Tipp für mich?

Das ist der Code meines kleinen Tests:

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
<style>
.kontaktfeld {
background: url("https://www.vintoo.com/backpic.png") no-repeat;
background-size: auto;
}
  </style>
</head>
<body>
<div class="kontaktfeld"><p>Hier irgendein Text</p></div>
</body></html>

Alles anzeigen

Und hier kann man sich das Ergebnis ansehen

http://vintoo.com/test.htm

Was muss ich ändern? Danke.

Gruß
Michael

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sailor56

Ein Hintergrundbild belegt keinen Platz, sorgt als nicht dafür, dass das Elternelement sich an dessen Größe anpasst.
Du musst also deinem <div> zunächst eine Größe (Höhe und Breite / zB 'height: 50vh; width: 50vh;')) geben und dann dem Hintergrundbild sagen, wie es sich im verfügbare Platz verhalte soll (zB 'background-size: cover;')

b3317133

Alternativ das Bild anders einbinden, z.B. ähnlich wie in diesem Thread.

mbhh

Ok, danke, hab's geändert, klappt.

Warum funktioniert es nicht, wenn man für height und width 50% angibt?

mbhh

Alternative Einbindung wie im Beispielthread: schaue ich mir an.

b3317133

Zitat von mbhh

..wenn man für height und width 50% angibt?

Du gibst auch jetzt 50% an, vom sichtbaren Viewport (vw = viewport width, vh = viewport height), daher sowas stets mit diversen Bildschirm- / Browsergrössen austesten...

Sailor56

Zitat von mbhh

Warum funktioniert es nicht, wenn man für height und width 50% angibt?

Weil die Angabe in % keine wirkliche Größenangabe ist... es sagt xx% des verfügbare Platzes - und dieser verfügbare Platz wird von dem Elternelement vorgegeben. In deinem Fall das <body> ... der ist nun mal in Höhe und Breite unterschiedlich.
Dagegen sind vh und vw tatsächlich messbare Größen, die von Breite bzw Höhe der Bildschirmanzeige abhängig sind und sich deswegen für solche Skalierung eignen.
In Kurzform.. 50% sind die Hälfte des verfügbaren Platzes (in der Regel ergibt das bei height und width unterschiedliche Werte)
50vw - die Hälfte der Bildschirmbreite
50vh - die Hälfte der Bildschirmhöhe

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bild im div wird nicht komplett angezeigt

Jetzt mitmachen!